<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <title>User Interface Security and the Visibility API</title>
  <meta content="WD" name="w3c-status">
  <link href="https://www.w3.org/StyleSheets/TR/2016/W3C-WD" rel="stylesheet" type="text/css">
  <link href="https://w3c.github.io/webappsec-uisecurity/" rel="canonical">
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-syntax-highlighting */
pre.idl.highlight { color: #708090; }
.highlight:not(.idl) { background: hsl(24, 20%, 95%); }
code.highlight { padding: .1em; border-radius: .3em; }
pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; }
c-[a] { color: #990055 } /* Keyword.Declaration */
c-[b] { color: #990055 } /* Keyword.Type */
c-[c] { color: #708090 } /* Comment */
c-[d] { color: #708090 } /* Comment.Multiline */
c-[e] { color: #0077aa } /* Name.Attribute */
c-[f] { color: #669900 } /* Name.Tag */
c-[g] { color: #222222 } /* Name.Variable */
c-[k] { color: #990055 } /* Keyword */
c-[l] { color: #000000 } /* Literal */
c-[m] { color: #000000 } /* Literal.Number */
c-[n] { color: #0077aa } /* Name */
c-[o] { color: #999999 } /* Operator */
c-[p] { color: #999999 } /* Punctuation */
c-[s] { color: #a67f59 } /* Literal.String */
c-[t] { color: #a67f59 } /* Literal.String.Single */
c-[u] { color: #a67f59 } /* Literal.String.Double */
c-[cp] { color: #708090 } /* Comment.Preproc */
c-[c1] { color: #708090 } /* Comment.Single */
c-[cs] { color: #708090 } /* Comment.Special */
c-[kc] { color: #990055 } /* Keyword.Constant */
c-[kn] { color: #990055 } /* Keyword.Namespace */
c-[kp] { color: #990055 } /* Keyword.Pseudo */
c-[kr] { color: #990055 } /* Keyword.Reserved */
c-[ld] { color: #000000 } /* Literal.Date */
c-[nc] { color: #0077aa } /* Name.Class */
c-[no] { color: #0077aa } /* Name.Constant */
c-[nd] { color: #0077aa } /* Name.Decorator */
c-[ni] { color: #0077aa } /* Name.Entity */
c-[ne] { color: #0077aa } /* Name.Exception */
c-[nf] { color: #0077aa } /* Name.Function */
c-[nl] { color: #0077aa } /* Name.Label */
c-[nn] { color: #0077aa } /* Name.Namespace */
c-[py] { color: #0077aa } /* Name.Property */
c-[ow] { color: #999999 } /* Operator.Word */
c-[mb] { color: #000000 } /* Literal.Number.Bin */
c-[mf] { color: #000000 } /* Literal.Number.Float */
c-[mh] { color: #000000 } /* Literal.Number.Hex */
c-[mi] { color: #000000 } /* Literal.Number.Integer */
c-[mo] { color: #000000 } /* Literal.Number.Oct */
c-[sb] { color: #a67f59 } /* Literal.String.Backtick */
c-[sc] { color: #a67f59 } /* Literal.String.Char */
c-[sd] { color: #a67f59 } /* Literal.String.Doc */
c-[se] { color: #a67f59 } /* Literal.String.Escape */
c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */
c-[si] { color: #a67f59 } /* Literal.String.Interpol */
c-[sx] { color: #a67f59 } /* Literal.String.Other */
c-[sr] { color: #a67f59 } /* Literal.String.Regex */
c-[ss] { color: #a67f59 } /* Literal.String.Symbol */
c-[vc] { color: #0077aa } /* Name.Variable.Class */
c-[vg] { color: #0077aa } /* Name.Variable.Global */
c-[vi] { color: #0077aa } /* Name.Variable.Instance */
c-[il] { color: #000000 } /* Literal.Number.Integer.Long */
</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"><a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" width="72"> </a> </p>
   <h1 class="p-name no-ref" id="title">User Interface Security and the Visibility API</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">W3C Working Draft, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <div data-fill-with="spec-metadata">
    <dl>
     <dt>This version:
     <dd><a class="u-url" href="https://www.w3.org/TR/1970/WD-UI Security-1-19700101/">https://www.w3.org/TR/1970/WD-UI Security-1-19700101/</a>
     <dt>Editor's Draft:
     <dd><a href="https://w3c.github.io/webappsec-uisecurity/">https://w3c.github.io/webappsec-uisecurity/</a>
     <dt>Feedback:
     <dd><span><a href="mailto:public-webappsec@w3.org?subject=%5BUI Security%5D%20YOUR%20TOPIC%20HERE">public-webappsec@w3.org</a> with subject line “<kbd>[UI Security] <i data-lt>… message topic …</i></kbd>” (<a href="https://lists.w3.org/Archives/Public/public-webappsec/" rel="discussion">archives</a>)</span>
     <dt class="editor">Editor:
     <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:hillbrad@fb.com">Brad Hill</a> (<span class="p-org org">Facebook</span>)
     <dt>Author:
     <dd>Dan Kaminsky, White Ops
     <dd>David Lin-Shung Huang, Carnegie Mellon University
     <dd>Giorgio Maone, Invited Expert
    </dl>
   </div>
   <div data-fill-with="warning"></div>
   <p class="copyright" data-fill-with="copyright"><a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 1970 <a href="https://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="https://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="https://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="https://www.keio.ac.jp/">Keio</a>, <a href="https://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/copyright-documents">document use</a> rules apply. </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>UI Security and the Visibility API defines both a

	declarative and imperative means for resources
	displayed in an embedded context to protect 
	themselves against having their content obscured,
	moved, or otherwise displayed in a misleading
	manner.</p>
  </div>
  <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2>
  <div data-fill-with="status">
   <p> <em>This section describes the status of this document at the time of
  its publication. Other documents may supersede this document. A list of
  current W3C publications and the latest revision of this technical report
  can be found in the <a href="https://www.w3.org/TR/">W3C technical reports
  index at https://www.w3.org/TR/.</a></em> </p>
   <p> This document was published by the <a href="https://www.w3.org/2011/webappsec/">Web Application Security Working Group</a> as a Working Draft. This document is intended to become a W3C Recommendation. </p>
   <p> The (<a href="https://lists.w3.org/Archives/Public/public-webappsec/">archived</a>) public mailing list <a href="mailto:public-webappsec@w3.org?Subject=%5BUI Security%5D%20PUT%20SUBJECT%20HERE">public-webappsec@w3.org</a> (see <a href="https://www.w3.org/Mail/Request">instructions</a>)
	is preferred for discussion of this specification.
	When sending e-mail,
	please put the text “UI Security” in the subject,
	preferably like this:
	“[UI Security] <em>…summary of comment…</em>” </p>
   <p> Publication as a Working Draft does not imply endorsement by the W3C
  Membership. This is a draft document and may be updated, replaced or
  obsoleted by other documents at any time. It is inappropriate to cite this
  document as other than work in progress. </p>
   <p> This document was produced by the <a href="https://www.w3.org/2011/webappsec/">Web Application Security Working Group</a>. </p>
   <p> This document was produced by a group operating under
	the <a href="https://www.w3.org/Consortium/Patent-Policy/">W3C Patent Policy</a>.
	W3C maintains a <a href="https://www.w3.org/2004/01/pp-impl/49309/status" rel="disclosure">public list of any patent disclosures</a> made in connection with the deliverables of the group;
	that page also includes instructions for disclosing a patent.
	An individual who has actual knowledge of a patent which the individual believes contains <a href="https://www.w3.org/Consortium/Patent-Policy/#def-essential">Essential Claim(s)</a> must disclose the information in accordance with <a href="https://www.w3.org/Consortium/Patent-Policy/#sec-Disclosure">section 6 of the W3C Patent Policy</a>. </p>
   <p> This document is governed by the <a href="https://www.w3.org/2019/Process-20190301/" id="w3c_process_revision">1 March 2019 W3C Process Document</a>. </p>
   <p></p>
  </div>
  <div data-fill-with="at-risk"></div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li><a href="#intro"><span class="secno">1</span> <span class="content">Introduction</span></a>
    <li><a href="#special-conformance"><span class="secno">2</span> <span class="content">Special Conformance Notes</span></a>
    <li>
     <a href="#visibility-observer-api"><span class="secno">3</span> <span class="content">VisibilityObserver API</span></a>
     <ol class="toc">
      <li><a href="#visibility-observer-callback"><span class="secno">3.1</span> <span class="content">The VisibilityObserverCallback</span></a>
      <li><a href="#visibility-observer-entry"><span class="secno">3.2</span> <span class="content">The VisibilityObserverEntry interface</span></a>
      <li><a href="#visibility-observer-interface"><span class="secno">3.3</span> <span class="content">The VisibilityObserver Interface</span></a>
      <li><a href="#visibility-observer-init"><span class="secno">3.4</span> <span class="content">The VisibilityObserverInit dictionary</span></a>
     </ol>
    <li>
     <a href="#csp-interface"><span class="secno">4</span> <span class="content">Content Security Policy Interface</span></a>
     <ol class="toc">
      <li>
       <a href="#input-protection-interface"><span class="secno">4.1</span> <span class="content">The <span>input-protection Directive</span></span></a>
       <ol class="toc">
        <li><a href="#directive-value"><span class="secno">4.1.1</span> <span class="content">Directive Value</span></a>
       </ol>
     </ol>
    <li>
     <a href="#processing-model"><span class="secno">5</span> <span class="content">Processing Model</span></a>
     <ol class="toc">
      <li>
       <a href="#defines"><span class="secno">5.1</span> <span class="content">Internal Slot Definitions</span></a>
       <ol class="toc">
        <li><a href="#browsing-context-slots"><span class="secno">5.1.1</span> <span class="content">Browsing Contexts</span></a>
        <li><a href="#element-private-slots"><span class="secno">5.1.2</span> <span class="content">Element</span></a>
        <li><a href="#document-private-slots"><span class="secno">5.1.3</span> <span class="content">Document</span></a>
        <li><a href="#visibility-observer-private-slots"><span class="secno">5.1.4</span> <span class="content">VisibilityObserver</span></a>
       </ol>
      <li>
       <a href="#algorithms"><span class="secno">5.2</span> <span class="content">Algorithms</span></a>
       <ol class="toc">
        <li><a href="#queue-visibility-observer-task-algo"><span class="secno">5.2.1</span> <span class="content">Queue a VisibilityObserver Task</span></a>
        <li><a href="#notify-visibility-observers-algo"><span class="secno">5.2.2</span> <span class="content">Notify VisibilityObservers</span></a>
        <li><a href="#queue-visibility-observer-entry-algo"><span class="secno">5.2.3</span> <span class="content">Queue a VisibilityObserverEntry</span></a>
        <li><a href="#promote-observed-graphicslayers-algo"><span class="secno">5.2.4</span> <span class="content">Promote Observed GraphicsLayers</span></a>
        <li><a href="#enforce-an-input-protection-directive-algo"><span class="secno">5.2.5</span> <span class="content">Enforce An input-protection Directive</span></a>
        <li><a href="#handle-a-violation-algo"><span class="secno">5.2.6</span> <span class="content">Handle a Violation</span></a>
       </ol>
      <li>
       <a href="#external-spec-integrations"><span class="secno">5.3</span> <span class="content">External Spec Integrations</span></a>
       <ol class="toc">
        <li><a href="#event-loop"><span class="secno">5.3.1</span> <span class="content">HTML Processing Model: Event Loop</span></a>
        <li><a href="#dispatching-events-algo"><span class="secno">5.3.2</span> <span class="content">DOM: Dispatching Events</span></a>
        <li><a href="#usafe-attribute"><span class="secno">5.3.3</span> <span class="content">isUnsafe Attribute</span></a>
       </ol>
     </ol>
    <li><a href="#privacy-considerations"><span class="secno">6</span> <span class="content">Privacy Considerations</span></a>
    <li><a href="#security-considerations"><span class="secno">7</span> <span class="content">Security Considerations</span></a>
    <li><a href="#accessibility-considerations"><span class="secno">8</span> <span class="content">Accessibility Considerations</span></a>
    <li>
     <a href="#conformance"><span class="secno"></span> <span class="content">Conformance</span></a>
     <ol class="toc">
      <li><a href="#conventions"><span class="secno"></span> <span class="content">Document conventions</span></a>
      <li><a href="#conformant-algorithms"><span class="secno"></span> <span class="content">Conformant Algorithms</span></a>
     </ol>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
     </ol>
    <li><a href="#idl-index"><span class="secno"></span> <span class="content">IDL Index</span></a>
    <li><a href="#issues-index"><span class="secno"></span> <span class="content">Issues Index</span></a>
   </ol>
  </nav>
  <main>
   <section>
    <h2 class="heading settled" data-level="1" id="intro"><span class="secno">1. </span><span class="content">Introduction</span><a class="self-link" href="#intro"></a></h2>
    <p><em>This section is not normative.</em></p>
    <p>Composite or "mash-up" web applications built using iframes
		are ubiquitous because they allow users to interact seamlessly and
		simultaneously with content from multiple origins while
		maintaining isolation boundaries that are essential to
		security and privacy for both users and applications.</p>
    <p>However, those boundaries are not absolute.  In particular,
		the visual and temporal integrity of embedded content is
		not protected from manipulation by the embedding resource.
		An embedding resource might constrain the viewport,
		draw over, transform, reposition, or resize the user’s
		view of a third-party resource.</p>
    <p>Collectively known as User Interface Redressing, the goal
		of such manipulations might be to entice the user to interact
		with embedded content without knowing its context, (e.g. to 
		send a payment or share content) commonly known as "clickjacking",
		or to convince paid content that it is being shown to the user
		when it is actually obscured, commonly known in the advertising
		business as "display fraud".</p>
    <p>Existing anti-clickjacking measures such as frame-busting
    scripts and headers granting origin-based embedding permissions have 
		shortcomings which prevent their application to important use-cases.
    Frame-busting scripts, for example, rely on browser behavior that has not been 
		engineered to provide a security guarantee and as a consequence,
		such scripts may be unreliable if loaded inside a sandbox
    or otherwise disabled. The X-Frame-Options header and the frame-ancestors
		Content Security Policy directive offer an all-or-none approach to
		display of embedded content that is not appropriate for content
		which may be embedded in arbitrary locations, or known locations
		which might still be adversarial.</p>
    <p>This document defines mechanisms to allow resources to
		request to be displayed free of interference by their embedding context and
		learn if the user agent was able to satisfy such a request, with 
		sufficient granularity to make decisions that can protect both users
		and content purveyors from various types of fraud.</p>
    <p>First, this document defines an imperative API, VisibilityObserver,
		by which a resource can request that a conforming user agent guarantee
		unmodified display of its viewport, and report events on the success or
		failure of meeting such guarantees.  This API should be suitable
		for e.g. paid content such as advertising to receive trustworthy
		signals about its viewability from a conforming user agent.</p>
    <p>Secondly, this specification defines a declarative mechanism
		(via a Content Security Poicy directive) to request visibility
		protection and receive notification, via event properties or
		out-of-band reporting, if certain events are delivered to
		a resource while it does not meet its requested visibility 
		contract.</p>
    <p>The declarative CSP interface does not offer the same fine-granularity control as
		the JavaScript API.  Its goal is to allow protection to be
		retrofitted to legacy applications, with no or minimal code changes, as a replacement for
		X-Frame-Options, or potentially for use with content that is sandboxed and cannot
		execute JavaScript.</p>
    <p class="issue" id="issue-b24dcbe0"><a class="self-link" href="#issue-b24dcbe0"></a> Do we need to deal with form submission / navigations that aren’t JS-event-based?</p>
    <p class="issue" id="issue-b233e40b"><a class="self-link" href="#issue-b233e40b"></a> how to interact with frame-ancestors and XFO?</p>
    <p>A notable non-goal is pixel-accurate information about what was
		actually displayed beyond its bounding rectangle, as this information
		can be quite difficult to obtain in an efficient manner, and is extremely
		difficult to accomplish without exposing timing side channels which leak
		information across the Same Origin Policy security boundary.</p>
    <div class="note" role="note">
      NOTE:
		Similar to, and modeled on the <a href="http://rawgit.com/slightlyoff/IntersectionObserver/master/index.html"> Intersection Observer</a> draft, this specification shares a goal of allowing reliable and low-cost
		calculation of element visibility for, e.g purposes of <a href="http://www.iab.net/iablog/2014/03/viewability-has-arrived-what-you-need-to-know-to-see-through-this-sea-change.html"> reporting ad visibility for monetizing impressions</a>.  The current specification
		adds the goals of preventing clickjacking and other UI redressing attacks both by enforcing that
		an iframe which has requested visibility be free of any transforms, movement or re-clipping
		within a defined time threshold, and by allowing event delivery to be intercepted or
		annotated when policies are not met. 
     <p>Distinct from the <em>Intersection Observer</em> proposal, this specification operates internally on entire
		documents, on a per-iframe basis (although it provides some syntatic sugar for the declarative,
		event-driven API) rather than observing individual elements, and it affirmatively modifies the final 
		composited result in the global viewport by promoting the graphics layer of an iframe that has requested visibility.</p>
    </div>
   </section>
   <section>
    <h2 class="heading settled" data-level="2" id="special-conformance"><span class="secno">2. </span><span class="content">Special Conformance Notes</span><a class="self-link" href="#special-conformance"></a></h2>
    <p><em>This section is not normative.</em></p>
    <p>UI Redressing attacks rely on fooling the subjective perceptions of
    human actors to induce them to interact with a web application out of
    its intended context.  Because of this, the specific mechanisms which
    may be used in attack and defense may vary greatly with the details of
    a user agent implementation.  For example, attacks which rely on
    redressing the cursor may not apply in a touch environment, or entire
    classes of attack may be impossible on a text-only browser or screen
    reader.</p>
    <p>Similarly, the implementation of the policies specified herein is highly
    dependent on internal architecture and implementation strategies of
    the user agent; such strategies may vary greatly between user agents
    or even across versions or platforms for a single user agent.</p>
    <p>This specification provides a normative means by which a resource
    owner can communicate to a user agent its desire for additional
    protective measures, actions to take if violations are detected,
    and tuning hints which may be useful for certain means of
    implementation.  A user agent is conformant if it understands
		these directives and makes a best effort to provide the desired 
		security properties, which might require no additional implementation
		steps, e.g. in the case of a screen reader that does not support
		embedded resources in a manner that is subject to any of the
		attack classes of concern.</p>
    <p>While the indeterminacy of the user agent implementation protects
    applications from needing to constantly update their policies as
    user agents make internal changes, application authors should
    understand that even a conformant user agent cannot make
    perfect security guarantees against UI Redressing.</p>
    <p>These directives should be used as part of a comprehensive risk
    mitigation strategy with an appropriate understanding of their
    limitations.</p>
   </section>
   <section>
    <h2 class="heading settled" data-level="3" id="visibility-observer-api"><span class="secno">3. </span><span class="content">VisibilityObserver API</span><a class="self-link" href="#visibility-observer-api"></a></h2>
    <p>The VisibilityObserver API provides an imperative API for developers to
	receive notification of visibility state changes for their document relative to
	the global viewport.</p>
    <h3 class="heading settled" data-level="3.1" id="visibility-observer-callback"><span class="secno">3.1. </span><span class="content">The VisibilityObserverCallback</span><a class="self-link" href="#visibility-observer-callback"></a></h3>
<pre class="idl highlight def"><c- b>callback</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="callback" data-export id="callbackdef-visibilityobservercallback"><code><c- g>VisibilityObserverCallback</c-></code></dfn> = <c- b>void</c->(<c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#visibilityobserverentry" id="ref-for-visibilityobserverentry"><c- n>VisibilityObserverEntry</c-></a>> <dfn class="idl-code" data-dfn-for="VisibilityObserverCallback" data-dfn-type="argument" data-export id="dom-visibilityobservercallback-entries"><code><c- g>entries</c-></code><a class="self-link" href="#dom-visibilityobservercallback-entries"></a></dfn>, <a class="n" data-link-type="idl-name" href="#visibilityobserver" id="ref-for-visibilityobserver"><c- n>VisibilityObserver</c-></a> <dfn class="idl-code" data-dfn-for="VisibilityObserverCallback" data-dfn-type="argument" data-export id="dom-visibilityobservercallback-observer"><code><c- g>observer</c-></code><a class="self-link" href="#dom-visibilityobservercallback-observer"></a></dfn>);
</pre>
    <p>This callback will be invoked when there are changes to the document’s <em>visibility state</em>.</p>
    <h3 class="heading settled" data-level="3.2" id="visibility-observer-entry"><span class="secno">3.2. </span><span class="content">The VisibilityObserverEntry interface</span><a class="self-link" href="#visibility-observer-entry"></a></h3>
<pre class="idl highlight def">[<dfn class="idl-code" data-dfn-for="VisibilityObserverEntry" data-dfn-type="constructor" data-export data-lt="VisibilityObserverEntry(callback, visibilityObserverEntryInit)|VisibilityObserverEntry(callback)" id="dom-visibilityobserverentry-visibilityobserverentry"><code><c- g>Constructor</c-></code><a class="self-link" href="#dom-visibilityobserverentry-visibilityobserverentry"></a></dfn>(<a class="n" data-link-type="idl-name" href="#callbackdef-visibilityobservercallback" id="ref-for-callbackdef-visibilityobservercallback"><c- n>VisibilityObserverCallback</c-></a> <dfn class="idl-code" data-dfn-for="VisibilityObserverEntry/VisibilityObserverEntry(callback, visibilityObserverEntryInit)" data-dfn-type="argument" data-export id="dom-visibilityobserverentry-visibilityobserverentry-callback-visibilityobserverentryinit-callback"><code><c- g>callback</c-></code><a class="self-link" href="#dom-visibilityobserverentry-visibilityobserverentry-callback-visibilityobserverentryinit-callback"></a></dfn>, <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-visibilityobserverentryinit" id="ref-for-dictdef-visibilityobserverentryinit"><c- n>VisibilityObserverEntryInit</c-></a> <dfn class="idl-code" data-dfn-for="VisibilityObserverEntry/VisibilityObserverEntry(callback, visibilityObserverEntryInit)" data-dfn-type="argument" data-export id="dom-visibilityobserverentry-visibilityobserverentry-callback-visibilityobserverentryinit-visibilityobserverentryinit"><code><c- g>visibilityObserverEntryInit</c-></code><a class="self-link" href="#dom-visibilityobserverentry-visibilityobserverentry-callback-visibilityobserverentryinit-visibilityobserverentryinit"></a></dfn>), <a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="visibilityobserverentry"><code><c- g>VisibilityObserverEntry</c-></code></dfn> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://www.w3.org/TR/geometry-1/#domrectreadonly" id="ref-for-domrectreadonly"><c- n>DOMRectReadOnly</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMRectReadOnly" href="#dom-visibilityobserverentry-globalvisiblebounds" id="ref-for-dom-visibilityobserverentry-globalvisiblebounds"><c- g>globalVisibleBounds</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://www.w3.org/TR/geometry-1/#domrectreadonly" id="ref-for-domrectreadonly①"><c- n>DOMRectReadOnly</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMRectReadOnly" href="#dom-visibilityobserverentry-visiblebounds" id="ref-for-dom-visibilityobserverentry-visiblebounds"><c- g>visibleBounds</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="http://www.w3.org/TR/hr-time/#domhighrestimestamp" id="ref-for-domhighrestimestamp"><c- n>DOMHighResTimeStamp</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMHighResTimeStamp" href="#dom-visibilityobserverentry-time" id="ref-for-dom-visibilityobserverentry-time"><c- g>time</c-></a>;
 };

<c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-visibilityobserverentryinit"><code><c- g>VisibilityObserverEntryInit</c-></code></dfn> {
  <c- b>required</c-> <a class="n" data-link-type="idl-name" href="https://www.w3.org/TR/geometry-1/#dictdef-domrectinit" id="ref-for-dictdef-domrectinit"><c- n>DOMRectInit</c-></a> <dfn class="idl-code" data-dfn-for="VisibilityObserverEntryInit" data-dfn-type="dict-member" data-export data-type="DOMRectInit " id="dom-visibilityobserverentryinit-globalvisiblebounds"><code><c- g>globalVisibleBounds</c-></code><a class="self-link" href="#dom-visibilityobserverentryinit-globalvisiblebounds"></a></dfn>;
  <c- b>required</c-> <a class="n" data-link-type="idl-name" href="https://www.w3.org/TR/geometry-1/#dictdef-domrectinit" id="ref-for-dictdef-domrectinit①"><c- n>DOMRectInit</c-></a> <dfn class="idl-code" data-dfn-for="VisibilityObserverEntryInit" data-dfn-type="dict-member" data-export data-type="DOMRectInit " id="dom-visibilityobserverentryinit-visiblebounds"><code><c- g>visibleBounds</c-></code><a class="self-link" href="#dom-visibilityobserverentryinit-visiblebounds"></a></dfn>;
  <c- b>required</c-> <a class="n" data-link-type="idl-name" href="http://www.w3.org/TR/hr-time/#domhighrestimestamp" id="ref-for-domhighrestimestamp①"><c- n>DOMHighResTimeStamp</c-></a> <dfn class="idl-code" data-dfn-for="VisibilityObserverEntryInit" data-dfn-type="dict-member" data-export data-type="DOMHighResTimeStamp " id="dom-visibilityobserverentryinit-time"><code><c- g>time</c-></code><a class="self-link" href="#dom-visibilityobserverentryinit-time"></a></dfn>;
};
</pre>
    <div>
      <dfn class="dfn-paneled idl-code" data-dfn-for="VisibilityObserverEntry" data-dfn-type="attribute" data-export id="dom-visibilityobserverentry-globalvisiblebounds"><code>globalVisibleBounds</code></dfn> The <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/geometry-1/#domrect" id="ref-for-domrect">DOMRect</a></code> coresponding to the visible dimensions of the 
				top-level document in the global viewport’s coordinate space. 
     <p><dfn class="dfn-paneled idl-code" data-dfn-for="VisibilityObserverEntry" data-dfn-type="attribute" data-export id="dom-visibilityobserverentry-visiblebounds"><code>visibleBounds</code></dfn> The <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/geometry-1/#domrect" id="ref-for-domrect①">DOMRect</a></code> corresponding to the document’s <i>boundingClientRect</i>,
				intersected by each of the document’s ancestor’s clipping rects,
				intersected with <code class="idl"><a data-link-type="idl" href="#dom-visibilityobserverentry-globalvisiblebounds" id="ref-for-dom-visibilityobserverentry-globalvisiblebounds①">globalVisibleBounds</a></code>.
				This value represents the portion of the document actually visible within <code class="idl"><a data-link-type="idl" href="#dom-visibilityobserverentry-globalvisiblebounds" id="ref-for-dom-visibilityobserverentry-globalvisiblebounds②">globalVisibleBounds</a></code>.</p>
     <p><dfn class="dfn-paneled idl-code" data-dfn-for="VisibilityObserverEntry" data-dfn-type="attribute" data-export id="dom-visibilityobserverentry-time"><code>time</code></dfn> A <code class="idl"><a data-link-type="idl" href="http://www.w3.org/TR/hr-time/#domhighrestimestamp" id="ref-for-domhighrestimestamp②">DOMHighResTimeStamp</a></code> that corresponds to the time the visibility
				state was recorded.</p>
    </div>
    <h3 class="heading settled" data-level="3.3" id="visibility-observer-interface"><span class="secno">3.3. </span><span class="content">The VisibilityObserver Interface</span><a class="self-link" href="#visibility-observer-interface"></a></h3>
     The VisibilityObserver interface can be used to observe changes in the
		document’s visibility state relative to the global viewport. 
<pre class="idl highlight def">[<dfn class="dfn-paneled idl-code" data-dfn-for="VisibilityObserver" data-dfn-type="constructor" data-export data-lt="VisibilityObserver(callback)" id="dom-visibilityobserver-visibilityobserver"><code><c- g>Constructor</c-></code></dfn>(<a class="n" data-link-type="idl-name" href="#callbackdef-visibilityobservercallback" id="ref-for-callbackdef-visibilityobservercallback①"><c- n>VisibilityObserverCallback</c-></a> <dfn class="idl-code" data-dfn-for="VisibilityObserver/VisibilityObserver(callback)" data-dfn-type="argument" data-export id="dom-visibilityobserver-visibilityobserver-callback-callback"><code><c- g>callback</c-></code><a class="self-link" href="#dom-visibilityobserver-visibilityobserver-callback-callback"></a></dfn>), <a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed①"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="visibilityobserver"><code><c- g>VisibilityObserver</c-></code></dfn> {
  <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-visibilityobserver-observe" id="ref-for-dom-visibilityobserver-observe"><c- g>observe</c-></a> ();
  <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-visibilityobserver-unobserve" id="ref-for-dom-visibilityobserver-unobserve"><c- g>unobserve</c-></a> ();
  <c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#visibilityobserverentry" id="ref-for-visibilityobserverentry①"><c- n>VisibilityObserverEntry</c-></a>> <a class="idl-code" data-link-type="method" href="#dom-visibilityobserver-takerecords" id="ref-for-dom-visibilityobserver-takerecords"><c- g>takeRecords</c-></a> ();
};
</pre>
    <div>
     <dl>
      <dt data-md>
       <p><dfn class="idl-code" data-dfn-for="VisibilityObserver" data-dfn-type="constructor" data-export data-lt="VisibilityObserver(callback, options)" id="dom-visibilityobserver-visibilityobserver-callback-options"><code>new VisibilityObserver(callback, options)</code><a class="self-link" href="#dom-visibilityobserver-visibilityobserver-callback-options"></a></dfn></p>
       <dl>
        <dd data-md>
       </dl>
     </dl>
     <ol>
      <li>Let <var>this</var> be a new <code class="idl"><a data-link-type="idl" href="#visibilityobserver" id="ref-for-visibilityobserver①">VisibilityObserver</a></code> object
      <li>Set <var>this</var>’s internal <code class="idl"><a data-link-type="idl" href="#dom-visibilityobserver-callback-slot" id="ref-for-dom-visibilityobserver-callback-slot">[[callback]]</a></code> slot to <var>callback</var>.
     </ol>
     <dl>
      <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="VisibilityObserver" data-dfn-type="method" data-export id="dom-visibilityobserver-observe"><code>observe()</code></dfn>
      <dd data-md>
       <ol>
        <li>Add <var>this</var> to the document’s <code class="idl"><a data-link-type="idl" href="#dom-document-registeredvisibilityobservers-slot" id="ref-for-dom-document-registeredvisibilityobservers-slot">[[RegisteredVisibilityObservers]]</a></code> list
       </ol>
      <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="VisibilityObserver" data-dfn-type="method" data-export id="dom-visibilityobserver-unobserve"><code>unobserve()</code></dfn>
      <dd data-md>
       <ol>
        <li>Remove <var>this</var> from the document’s <code class="idl"><a data-link-type="idl" href="#dom-document-registeredvisibilityobservers-slot" id="ref-for-dom-document-registeredvisibilityobservers-slot①">[[RegisteredVisibilityObservers]]</a></code> set.
       </ol>
      <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="VisibilityObserver" data-dfn-type="method" data-export id="dom-visibilityobserver-takerecords"><code>takeRecords()</code></dfn>
      <dd data-md>
       <ol>
        <li>Let <var>queue</var> be a copy of <var>this</var>’s internal <code class="idl"><a data-link-type="idl" href="#dom-visibilityobserver-queuedentries-slot" id="ref-for-dom-visibilityobserver-queuedentries-slot">[[QueuedEntries]]</a></code> slot.
        <li>Clear <var>this</var>’s internal <code class="idl"><a data-link-type="idl" href="#dom-visibilityobserver-queuedentries-slot" id="ref-for-dom-visibilityobserver-queuedentries-slot①">[[QueuedEntries]]</a></code> slot.
        <li>Return <var>queue</var>.
       </ol>
     </dl>
    </div>
    <h3 class="heading settled" data-level="3.4" id="visibility-observer-init"><span class="secno">3.4. </span><span class="content">The VisibilityObserverInit dictionary</span><a class="self-link" href="#visibility-observer-init"></a></h3>
<pre class="idl highlight def"><c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-visibilityobserverinit"><code><c- g>VisibilityObserverInit</c-></code></dfn> {
  (<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double"><c- b>double</c-></a> <c- b>or</c-> <c- b>sequence</c->&lt;<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①"><c- b>double</c-></a>>) <a class="idl-code" data-default="0" data-link-type="dict-member" data-type="(double or sequence<double>) " href="#dom-visibilityobserverinit-areathreshold" id="ref-for-dom-visibilityobserverinit-areathreshold"><c- g>areaThreshold</c-></a> = 0;
 (<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean"><c- b>boolean</c-></a>) <a class="idl-code" data-default="false" data-link-type="dict-member" data-type="(boolean) " href="#dom-visibilityobserverinit-displacementaware" id="ref-for-dom-visibilityobserverinit-displacementaware"><c- g>displacementAware</c-></a> = <c- b>false</c->;
 (<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString"><c- b>DOMString</c-></a>) <a class="idl-code" data-default="&quot;0px&quot;" data-link-type="dict-member" data-type="(DOMString) " href="#dom-visibilityobserverinit-visiblemargin" id="ref-for-dom-visibilityobserverinit-visiblemargin"><c- g>visibleMargin</c-></a> = "0px";
 (<a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element" id="ref-for-element"><c- n>Element</c-></a>)? <a class="idl-code" data-link-type="dict-member" data-type="(Element)? " href="#dom-visibilityobserverinit-observedelement" id="ref-for-dom-visibilityobserverinit-observedelement"><c- g>observedElement</c-></a>;
};
</pre>
    <div>
     <dl>
      <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="VisibilityObserverInit" data-dfn-type="dict-member" data-export id="dom-visibilityobserverinit-areathreshold"><code>areaThreshold</code></dfn>, <span> of type <code class="idl-code">(double or sequence&lt;double>)</code>, defaulting to <code>0</code></span>
      <dd data-md>
       <p>List of threshold(s) at which to trigger callback.
callback will be invoked when visibleBounds area changes from
greater than or equal to any threshold to less than that threshold,
and vice versa.</p>
       <p>Threshold values must be in the range of [0, 1.0] and represent a
percentage of the area as specified by <em>target</em>.<code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/cssom-view/#dom-element-getboundingclientrect" id="ref-for-dom-element-getboundingclientrect">getBoundingClientRect()</a></code>.</p>
       <p class="note" role="note"><span>Note:</span> 0.0 is effectively "any non-zero number of pixels".</p>
      <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="VisibilityObserverInit" data-dfn-type="dict-member" data-export id="dom-visibilityobserverinit-displacementaware"><code>displacementAware</code></dfn>, <span> of type <code class="idl-code">(boolean)</code>, defaulting to <code>false</code></span>
      <dd data-md>
       <p>If <em>true</em>, this observer should trigger the callback
when the position of the <code class="idl"><a data-link-type="idl" href="#dom-visibilityobserver-observedelement-slot" id="ref-for-dom-visibilityobserver-observedelement-slot">[[observedElement]]</a></code> changes relative to the
global viewport.</p>
      <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="VisibilityObserverInit" data-dfn-type="dict-member" data-export id="dom-visibilityobserverinit-visiblemargin"><code>visibleMargin</code></dfn>, <span> of type <code class="idl-code">(DOMString)</code>, defaulting to <code>"0px"</code></span>
      <dd data-md>
       <p>Same as <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-box-3/#propdef-margin" id="ref-for-propdef-margin">margin</a>, extends the required visibility rectangle
	behind the <a data-link-type="dfn" href="#protected-element" id="ref-for-protected-element">protected-element</a>.<code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/cssom-view/#dom-element-getboundingclientrect" id="ref-for-dom-element-getboundingclientrect①">getBoundingClientRect()</a></code>.
	Can be 1, 2, 3 or 4 components, possibly negative lengths.</p>
       <p>If there is only one component value, it applies to all sides.
	If there are two values, the top and bottom margins are set to
	the first value and the right and left margins are set to the
	second. If there are three values, the top is set to the first
	value, the left and right are set to the second, and the bottom
	is set to the third. If there are four values, they apply to the
	top, right, bottom, and left, respectively.e.g.</p>
<pre class="example" id="example-105651ff"><a class="self-link" href="#example-105651ff"></a><code class="js">
  "5px"                // all margins set to 5px
  "5px 10px"           // top &amp; bottom = 5px, right &amp; left = 10px
  "-10px 5px 8px"      // top = -10px, right &amp; left = 5px, bottom = 8px
  "-10px -5px 5px 8px" // top = -10px, right = -5px, bottom = 5px, left = 8px
</code></pre>
      <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="VisibilityObserverInit" data-dfn-type="dict-member" data-export id="dom-visibilityobserverinit-observedelement"><code>observedElement</code></dfn>, <span> of type <code class="idl-code">(Element)</code>, nullable</span>
      <dd data-md>
       <p>The <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element①">Element</a></code> being observed.  If unset, the internal slot will be
initialized to the <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document">Document</a></code> element.</p>
     </dl>
    </div>
    <section>
     <section>
      <h2 class="heading settled" data-level="4" id="csp-interface"><span class="secno">4. </span><span class="content">Content Security Policy Interface</span><a class="self-link" href="#csp-interface"></a></h2>
      <p>This section describes the Content Security Policy
    directive introduced in this specification to provide declarative
		configuration of protection against input when an element does not meet it’s
		visibility requirements.</p>
      <p>The optional directive-value allows configuration of conditions for which violations
		will be triggered.</p>
      <h3 class="heading settled" data-level="4.1" id="input-protection-interface"><span class="secno">4.1. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="input-protection-directive">input-protection Directive</dfn></span><a class="self-link" href="#input-protection-interface"></a></h3>
<pre>directive-name    = 'input-protection'
directive-value   = ['area-threshold=' num-val]
                    ['protected-element=' id-selector]
                    ['time-threshold=' num-val]
                    ['visible-margin=' num-val 'px' *3(',' num-val 'px')]
</pre>
      <h4 class="heading settled" data-level="4.1.1" id="directive-value"><span class="secno">4.1.1. </span><span class="content">Directive Value</span><a class="self-link" href="#directive-value"></a></h4>
      <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="area-threshold">area-threshold</dfn> A violation will be triggered if an event is delivered to the
				protected-element or one of its ancestors if the visibility of the
				protected area is below this threshold.</p>
      <p>Threshold values must be in the range [0, 1.0] and represent a
				percentage of the area as specified by <a data-link-type="dfn" href="#protected-element" id="ref-for-protected-element①">protected-element</a>.<code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/cssom-view/#dom-element-getboundingclientrect" id="ref-for-dom-element-getboundingclientrect②">getBoundingClientRect()</a></code>,
				adjusted by <a data-link-type="dfn" href="#visible-margin" id="ref-for-visible-margin">visible-margin</a>.  Unlike the imperative API,
				only a single value may be specified.</p>
      <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="protected-element">protected-element</dfn> A <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①">DOMString</a></code> used as the argument to <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#dom-nonelementparentnode-getelementbyid" id="ref-for-dom-nonelementparentnode-getelementbyid">getElementById()</a></code> to resolve the <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element②">Element</a></code> to which the policy applies.</p>
      <p>If unspecified the policy is applied to the resource’s <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document①">Document</a></code> node.</p>
      <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="time-threshold">time-threshold</dfn> A numeric value in the range [0, 10000] that specifies how long,
				in milliseconds, the screen area containing the protected-element
				must have unmodified viewiability properties when an event is 
				delivered to it or one of its ancestors.</p>
      <p>If not specified, it defaults to 800.  If a value outside of the
				range stated above is given, it defaults ot the nearest value
				between the lower and higher bounds.</p>
      <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="visible-margin">visible-margin</dfn> Same as <code class="idl"><a data-link-type="idl" href="#dom-visibilityobserverinit-visiblemargin" id="ref-for-dom-visibilityobserverinit-visiblemargin①">visibleMargin</a></code>.</p>
      <p>If unspecified, it defaults to "0px".</p>
     </section>
     <section>
      <h2 class="heading settled" data-level="5" id="processing-model"><span class="secno">5. </span><span class="content">Processing Model</span><a class="self-link" href="#processing-model"></a></h2>
       This section outlines the steps the user agent must take when implementing the
	VisibilityObserver API. 
      <h3 class="heading settled" data-level="5.1" id="defines"><span class="secno">5.1. </span><span class="content">Internal Slot Definitions</span><a class="self-link" href="#defines"></a></h3>
      <h4 class="heading settled" data-level="5.1.1" id="browsing-context-slots"><span class="secno">5.1.1. </span><span class="content">Browsing Contexts</span><a class="self-link" href="#browsing-context-slots"></a></h4>
       Each <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#unit-of-related-similar-origin-browsing-contexts" id="ref-for-unit-of-related-similar-origin-browsing-contexts">unit of related similar-origin browsing contexts</a> has an <dfn class="dfn-paneled" data-dfn-for="browsing context" data-dfn-type="dfn" data-noexport id="browsing-context-visibilityobservertaskqueued">VisibilityObserverTaskQueued</dfn> flag which
			is initialized to false. 
      <h4 class="heading settled" data-level="5.1.2" id="element-private-slots"><span class="secno">5.1.2. </span><span class="content">Element</span><a class="self-link" href="#element-private-slots"></a></h4>
       <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element③">Element</a></code> objects have an internal <dfn class="dfn-paneled idl-code" data-dfn-for="Element" data-dfn-type="attribute" data-export id="dom-element-inputprotectionobservers-slot"><code>[[InputProtectionObservers]]</code></dfn> list,
			which is initially empty. 
      <h4 class="heading settled" data-level="5.1.3" id="document-private-slots"><span class="secno">5.1.3. </span><span class="content">Document</span><a class="self-link" href="#document-private-slots"></a></h4>
       <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document②">Document</a></code> objects have an internal <dfn class="dfn-paneled idl-code" data-dfn-for="Document" data-dfn-type="attribute" data-export id="dom-document-registeredvisibilityobservers-slot"><code>[[RegisteredVisibilityObservers]]</code></dfn> list,
			which is initially empty, and an <dfn class="dfn-paneled idl-code" data-dfn-for="Document" data-dfn-type="attribute" data-export id="dom-document-inputprotectionrequested-slot"><code>[[InputProtectionRequested]]</code></dfn> flag which is intitially <i>false</i>. 
      <h4 class="heading settled" data-level="5.1.4" id="visibility-observer-private-slots"><span class="secno">5.1.4. </span><span class="content">VisibilityObserver</span><a class="self-link" href="#visibility-observer-private-slots"></a></h4>
       <code class="idl"><a data-link-type="idl" href="#visibilityobserver" id="ref-for-visibilityobserver②">VisibilityObserver</a></code> objects have the following internal slots: 
      <ul>
       <li><dfn class="dfn-paneled idl-code" data-dfn-for="VisibilityObserver" data-dfn-type="attribute" data-export id="dom-visibilityobserver-queuedentries-slot"><code>[[QueuedEntries]]</code></dfn> which is initialized to an empty list
       <li><dfn class="dfn-paneled idl-code" data-dfn-for="VisibilityObserver" data-dfn-type="attribute" data-export id="dom-visibilityobserver-previousvisibleratio-slot"><code>[[previousVisibleRatio]]</code></dfn> which is initialized to 0
       <li><dfn class="dfn-paneled idl-code" data-dfn-for="VisibilityObserver" data-dfn-type="attribute" data-export id="dom-visibilityobserver-previousglobalviewportposition-slot"><code>[[previousGlobalViewportPosition]]</code></dfn> 
      </ul>
       As well as internal slots initialized by <a data-link-type="functionish" href="#dom-visibilityobserver-visibilityobserver" id="ref-for-dom-visibilityobserver-visibilityobserver">VisibilityObserver(callback,options)</a>: 
      <ul>
       <li><dfn class="dfn-paneled idl-code" data-dfn-for="VisibilityObserver" data-dfn-type="attribute" data-export id="dom-visibilityobserver-callback-slot"><code>[[callback]]</code></dfn>
       <li><dfn class="dfn-paneled idl-code" data-dfn-for="VisibilityObserver" data-dfn-type="attribute" data-export id="dom-visibilityobserver-areathreshold-slot"><code>[[areaThreshold]]</code></dfn>
       <li><dfn class="dfn-paneled idl-code" data-dfn-for="VisibilityObserver" data-dfn-type="attribute" data-export id="dom-visibilityobserver-displacementaware-slot"><code>[[displacementAware]]</code></dfn>
       <li><dfn class="dfn-paneled idl-code" data-dfn-for="VisibilityObserver" data-dfn-type="attribute" data-export id="dom-visibilityobserver-visiblemargin-slot"><code>[[visibleMargin]]</code></dfn>
       <li><dfn class="dfn-paneled idl-code" data-dfn-for="VisibilityObserver" data-dfn-type="attribute" data-export id="dom-visibilityobserver-observedelement-slot"><code>[[observedElement]]</code></dfn> which is
				initialized to the <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document③">Document</a></code> Element if not set in the <code class="idl"><a data-link-type="idl" href="#dictdef-visibilityobserverinit" id="ref-for-dictdef-visibilityobserverinit">VisibilityObserverInit</a></code> dictionary
      </ul>
       The following internal slots will be initialzed to <i>null</i> unless the 
		 object was constructed to represent an <a data-link-type="dfn" href="#input-protection-directive" id="ref-for-input-protection-directive">input-protection directive</a>. 
      <ul>
       <li><dfn class="dfn-paneled idl-code" data-dfn-for="VisibilityObserver" data-dfn-type="attribute" data-export id="dom-visibilityobserver-timethreshold-slot"><code>[[timeThreshold]]</code></dfn>
       <li><dfn class="dfn-paneled idl-code" data-dfn-for="VisibilityObserver" data-dfn-type="attribute" data-export id="dom-visibilityobserver-associatedcontentsecuritypolicy-slot"><code>[[associatedContentSecurityPolicy]]</code></dfn>
      </ul>
      <h3 class="heading settled" data-level="5.2" id="algorithms"><span class="secno">5.2. </span><span class="content">Algorithms</span><a class="self-link" href="#algorithms"></a></h3>
      <h4 class="heading settled" data-level="5.2.1" id="queue-visibility-observer-task-algo"><span class="secno">5.2.1. </span><span class="content">Queue a VisibilityObserver Task</span><a class="self-link" href="#queue-visibility-observer-task-algo"></a></h4>
       To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="queue-a-visibility-observer-task">queue a visibility observer task</dfn> for a <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#unit-of-related-similar-origin-browsing-contexts" id="ref-for-unit-of-related-similar-origin-browsing-contexts①">unit of related similar-origin browsing contexts</a> <var>unit</var>,
			run these steps: 
      <ol>
       <li>If <var>unit</var>’s <a data-link-type="dfn" href="#browsing-context-visibilityobservertaskqueued" id="ref-for-browsing-context-visibilityobservertaskqueued">VisibilityObserverTaskQueued</a> flag is set to
						true, return.
       <li>Set <var>unit</var>’s <a data-link-type="dfn" href="#browsing-context-visibilityobservertaskqueued" id="ref-for-browsing-context-visibilityobservertaskqueued①">VisibilityObserverTaskQueued</a> flag to true.
       <li>
        Post a task to <a data-link-type="dfn" href="#notify-visibility-observers" id="ref-for-notify-visibility-observers">notify visibility observers</a>, or enqueue a
						task to <a data-link-type="dfn" href="#notify-visibility-observers" id="ref-for-notify-visibility-observers①">notify visibility observers</a> in the <a data-link-type="dfn" href="http://w3c.github.io/requestidlecallback/#dfn-list-of-idle-request-callbacks" id="ref-for-dfn-list-of-idle-request-callbacks">list of idle request callbacks</a> with an appropriate <var>timeout</var>. 
        <p class="issue" id="issue-338c1e1f"><a class="self-link" href="#issue-338c1e1f"></a> Should we define an appropriate <var>timeout</var>?</p>
      </ol>
      <h4 class="heading settled" data-level="5.2.2" id="notify-visibility-observers-algo"><span class="secno">5.2.2. </span><span class="content">Notify VisibilityObservers</span><a class="self-link" href="#notify-visibility-observers-algo"></a></h4>
       To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="notify-visibility-observers">notify visibility observers</dfn> for a <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#unit-of-related-similar-origin-browsing-contexts" id="ref-for-unit-of-related-similar-origin-browsing-contexts②">unit of related similar-origin browsing contexts</a> <var>unit</var>,
			run these steps: 
      <ol>
       <li>Set <var>unit</var>’s <a data-link-type="dfn" href="#browsing-context-visibilityobservertaskqueued" id="ref-for-browsing-context-visibilityobservertaskqueued②">VisibilityObserverTaskQueued</a> flag to false.
       <li>For each <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document④">Document</a></code> <var>document</var> in <var>unit</var>
       <ol>
        <li>Let <var>notify list</var> be a copy of <var>document</var>’s <code class="idl"><a data-link-type="idl" href="#dom-document-registeredvisibilityobservers-slot" id="ref-for-dom-document-registeredvisibilityobservers-slot②">[[RegisteredVisibilityObservers]]</a></code> list.
        <li>For each <code class="idl"><a data-link-type="idl" href="#visibilityobserver" id="ref-for-visibilityobserver③">VisibilityObserver</a></code> object <var>observer</var> in <var>notify list</var>, run these steps:
        <ol>
         <li>If <var>observer</var>’s internal <code class="idl"><a data-link-type="idl" href="#dom-visibilityobserver-queuedentries-slot" id="ref-for-dom-visibilityobserver-queuedentries-slot②">[[QueuedEntries]]</a></code> slot is
										empty, continue.
         <li>Let <var>queue</var> be a copy of <var>observer</var>’s internal <code class="idl"><a data-link-type="idl" href="#dom-visibilityobserver-queuedentries-slot" id="ref-for-dom-visibilityobserver-queuedentries-slot③">[[QueuedEntries]]</a></code> slot.
         <li>Clear <var>observer</var>’s internal <code class="idl"><a data-link-type="idl" href="#dom-visibilityobserver-queuedentries-slot" id="ref-for-dom-visibilityobserver-queuedentries-slot④">[[QueuedEntries]]</a></code> slot.
         <li>Invoke <var>callback</var> with <var>queue</var> as the first argument and <var>observer</var> as the second argument and <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/infrastructure.html#dfn-callback-this-value" id="ref-for-dfn-callback-this-value">callback this value</a>. If this throws an exception, <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#report-the-exception" id="ref-for-report-the-exception">report the exception</a>.
        </ol>
       </ol>
      </ol>
      <h4 class="heading settled" data-level="5.2.3" id="queue-visibility-observer-entry-algo"><span class="secno">5.2.3. </span><span class="content">Queue a VisibilityObserverEntry</span><a class="self-link" href="#queue-visibility-observer-entry-algo"></a></h4>
       To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="queue-a-visibilityobserverentry">queue a VisibilityObserverEntry</dfn> for <var>observer</var>, given a <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#unit-of-related-similar-origin-browsing-contexts" id="ref-for-unit-of-related-similar-origin-browsing-contexts③">unit of related similar-origin browsing contexts</a> <var>unit</var>, VisibilityObserver <var>observer</var>, and VisibilityObserverEntry <var>entry</var> run these steps: 
      <ol>
       <li>Append <var>entry</var> to <var>observer</var>’s internal <code class="idl"><a data-link-type="idl" href="#dom-visibilityobserver-queuedentries-slot" id="ref-for-dom-visibilityobserver-queuedentries-slot⑤">[[QueuedEntries]]</a></code> slot.
       <li><a data-link-type="dfn" href="#queue-a-visibility-observer-task" id="ref-for-queue-a-visibility-observer-task">Queue a visibility observer task</a> for <var>unit</var>.
      </ol>
      <h4 class="heading settled" data-level="5.2.4" id="promote-observed-graphicslayers-algo"><span class="secno">5.2.4. </span><span class="content">Promote Observed GraphicsLayers</span><a class="self-link" href="#promote-observed-graphicslayers-algo"></a></h4>
      <p><em>This section is non-normative.</em></p>
      <div class="note" role="note">
        NOTE: The full internal details of rendering a document to the pixels 
				actually displayed to the user is not standardized. UA implementations 
				may vary widely. 
       <p>The implementation strategy detailed in this section is not normative. Any
				strategy which produces correct outcomes for the normative algorithms is 
				conformant and implementers are encouraged to optimize whenever possible.</p>
       <p>The possibility of variance among user agent implementations notwithstanding,
				the normative algorithms of this specification are designed such that a highly performant 
				implementation should be possible on the most common internal software and hardware
				architectures that are state-of-the-art for user agents and consumer computing
				platforms as of the time of writing.</p>
       <p>In particular, the approach here deliberately avoids auditing the correctness
				of the representations displayed to users.  In typical architectures, the pixel-level
				rendering of the global viewport is delgated to a a Graphics Processing Unit (GPU)
				using higher-level abstractions like surfaces, polygons, and vectors. As a consequence,
				the main execution context of the user agent does not "know" what pixels actually result
				without reading them back.  System architectures are optimized for sending data 
				to a GPU, not returning data from it, therefore, approaches which rely on pixel comparisons
				are likely to have an unacceptable performance cost.  Instead, the approach detailed 
				here relies on correctness by design, by manipulating the order in which instructions 
				are sent to the GPU such that malicious interference is not possible.</p>
      </div>
      <p>Generally, at some point in the rendering of a set of documents in nested browsing
				contexts into the fully composed graphical representation in the global viewport,
				a user agent will arrive at a set of intermediate representations we will designate 
				as <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="graphicslayer">GraphicsLayer</dfn>s, each of which represents a graphical surface to be
				painted / clipped / scrolled.</p>
      <p>A <a data-link-type="dfn" href="#graphicslayer" id="ref-for-graphicslayer">GraphicsLayer</a> representing the contents of a document in an iframe will
				be arranged in the layer stack such that at a later phase in the rendering 
				it is automatically clipped and positioned relative to the series of viewports 
				above it, and also subject to being drawn over or transformed by the layers above it.</p>
      <p>To prevent potentially malicious composition, the user agent can <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="promote-observed-graphicslayers">promote observed graphicsLayers</dfn> by manipulating them such that
				a document with <code class="idl"><a data-link-type="idl" href="#dom-document-registeredvisibilityobservers-slot" id="ref-for-dom-document-registeredvisibilityobservers-slot③">[[RegisteredVisibilityObservers]]</a></code></p>
      <ul>
       <li>Is clipped and positioned as-if-unmodified within the set of viewports of its ancestor 
							browsing contexts. A promoted document should not be able to occupy more
							screen real estate than it is given by its embedding contexts.
       <li>Responds to hit testing and events as-if-unmodified.  Implementation-specific modifications
							to internal representations of the document should not change the behavior of the DOM.
       <li>Is not subject to being drawn over or transformed by any other <a data-link-type="dfn" href="#graphicslayer" id="ref-for-graphicslayer①">GraphicsLayers</a>,
							except other promoted layers, which should be treated as fully opaque occlusions 
							when reporting the visibility state of the document.
      </ul>
      <p>To <a data-link-type="dfn" href="#promote-observed-graphicslayers" id="ref-for-promote-observed-graphicslayers">promote observed graphicsLayers</a>, given a time <var>now</var>, and an initially empty list <var>promotedLayers</var>, run these steps during the rendering
				loop at the stage where the intermediate representation of a set of <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document⑤">Document</a></code>s is a set of <a data-link-type="dfn" href="#graphicslayer" id="ref-for-graphicslayer②">GraphicsLayer</a>s <var>graphicsLayers</var>.</p>
      <ol>
       <li>For each <var>graphicsLayer</var> in <var>graphicsLayers</var>
       <li>For each <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document⑥">Document</a></code> <var>document</var> with an intermediate representation in <var>graphicsLayer</var>
       <ol>
        <li>If <var>document</var> has an empty list of <code class="idl"><a data-link-type="idl" href="#dom-document-registeredvisibilityobservers-slot" id="ref-for-dom-document-registeredvisibilityobservers-slot④">[[RegisteredVisibilityObservers]]</a></code>, continue.
        <li>If <var>document</var> has a non-empty list of <code class="idl"><a data-link-type="idl" href="#dom-document-registeredvisibilityobservers-slot" id="ref-for-dom-document-registeredvisibilityobservers-slot⑤">[[RegisteredVisibilityObservers]]</a></code>
        <ol>
         <li>If <var>document</var> is not the only <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document⑦">Document</a></code> represented  in <var>graphicsLayer</var>, apply
											whatever implementation-specific steps are necessary to place it in its own layer.
											(e.g. apply translatez(0) to the documentElement) Let <var>graphicsLayer</var> be that
											new layer.
        </ol>
        <li>Let <var>rectToRaise</var> be the value of <var>document</var>.<code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/cssom-view/#dom-element-getboundingclientrect" id="ref-for-dom-element-getboundingclientrect③">getBoundingClientRect()</a></code>.
        <li>Intersect <var>rectToRaise</var> with <var>document</var>’s viewport clip rect.
        <li>For every <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#parent-browsing-context" id="ref-for-parent-browsing-context">parent browsing context</a> <var>parent</var> between <var>document</var> and the top-level document,
									intersect <var>rectToRaise</var> with <var>parent</var>’s viewport clip rect,
									and finally with the global viewport clip rect.
        <li>Clip <var>graphicsLayer</var> to <var>rectToRaise</var>.  (<var>graphicsLayer</var> may have zero width and height
									if it is scrolled off screen by an ancestor browsing context)
        <li>Intersect <var>rectToRaise</var> with any items in the <var>promotedLayers</var> list.
        <li>Add <var>rectToRaise</var> to the <var>promotedLayers</var> list.
        <li>Without reordering prior intermediate representations in a manner which would 
									change event dispatching, hit testing, or the DOM as exposed to JavaScript, reorder
									the <a data-link-type="dfn" href="#graphicslayer" id="ref-for-graphicslayer③">GraphicsLayer</a>s such that <var>rectToRaise</var> is on top of the root <a data-link-type="dfn" href="#graphicslayer" id="ref-for-graphicslayer④">GraphicsLayer</a>. 
									(e.g. by making it a direct child of the root layer) but beneath any layers in <var>promotedLayers</var> that clipped it.
        <li>Let <var>protectedRect</var> be the value of <var>observer</var>’s <code class="idl"><a data-link-type="idl" href="#dom-visibilityobserver-observedelement-slot" id="ref-for-dom-visibilityobserver-observedelement-slot①">[[observedElement]]</a></code>.<code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/cssom-view/#dom-element-getboundingclientrect" id="ref-for-dom-element-getboundingclientrect④">getBoundingClientRect()</a></code>,
									adjusted by <code class="idl"><a data-link-type="idl" href="#dom-visibilityobserver-visiblemargin-slot" id="ref-for-dom-visibilityobserver-visiblemargin-slot">[[visibleMargin]]</a></code>.
        <li>Let <var>visibleRatio</var> be the intersection of <var>protectedRect</var> with <var>rectToRaise</var>, divided by <var>protectedRect</var> if <var>protectedRect</var> is non-zero, and <i>0</i> otherwise.
        <li>For each of <var>document</var>’s <code class="idl"><a data-link-type="idl" href="#dom-document-registeredvisibilityobservers-slot" id="ref-for-dom-document-registeredvisibilityobservers-slot⑥">[[RegisteredVisibilityObservers]]</a></code> <var>observer</var>
        <ol>
         <li>Let <var>threshold</var> be the index of the first entry in <var>observer</var>’s internal <code class="idl"><a data-link-type="idl" href="#dom-visibilityobserver-areathreshold-slot" id="ref-for-dom-visibilityobserver-areathreshold-slot">[[areaThreshold]]</a></code> slot whose value
                        is greater than or equal to <var>visibleRatio</var>. If <var>visibleRatio</var> is equal to <i>0</i>, let <var>threshold</var> be <i>-1</i>.
         <li>Let <var>oldVisibleRatio</var> be set to <var>observer</var>’s internal <code class="idl"><a data-link-type="idl" href="#dom-visibilityobserver-previousvisibleratio-slot" id="ref-for-dom-visibilityobserver-previousvisibleratio-slot">[[previousVisibleRatio]]</a></code> slot.
         <li>Let <var>oldThreshold</var> be the index of the first entry in <var>observer</var>’s internal <code class="idl"><a data-link-type="idl" href="#dom-visibilityobserver-areathreshold-slot" id="ref-for-dom-visibilityobserver-areathreshold-slot①">[[areaThreshold]]</a></code> slot whose value
                        is greater than or equal to <var>oldVisibleRatio</var>. If <var>oldVisibleRatio</var> is equal to <i>0</i>, let <var>oldThreshold</var> be <i>-1</i>.
         <li>Let <var>oldPosition</var> be the value of the <var>observer</var>’s internal <code class="idl"><a data-link-type="idl" href="#dom-visibilityobserver-previousglobalviewportposition-slot" id="ref-for-dom-visibilityobserver-previousglobalviewportposition-slot">[[previousGlobalViewportPosition]]</a></code>.
         <li>If <var>threshold</var> does not equal <var>oldThreshold</var>, or if <var>observer</var>’s 
												internal <code class="idl"><a data-link-type="idl" href="#dom-visibilityobserver-displacementaware-slot" id="ref-for-dom-visibilityobserver-displacementaware-slot">[[displacementAware]]</a></code> slot is <i>true</i> and <var>oldPosition</var> is not equal to <var>protectedRect</var>,
         <ul>
          <li><a data-link-type="dfn" href="#queue-a-visibilityobserverentry" id="ref-for-queue-a-visibilityobserverentry">queue a VisibilityObserverEntry</a>
          <li>Assign <var>visibleRatio</var> to <var>observer</var>’s internal <code class="idl"><a data-link-type="idl" href="#dom-visibilityobserver-previousvisibleratio-slot" id="ref-for-dom-visibilityobserver-previousvisibleratio-slot①">[[previousVisibleRatio]]</a></code> slot.
          <li>Assign <var>protectedRect</var> to the value of the <var>observer</var>’s internal <code class="idl"><a data-link-type="idl" href="#dom-visibilityobserver-previousglobalviewportposition-slot" id="ref-for-dom-visibilityobserver-previousglobalviewportposition-slot①">[[previousGlobalViewportPosition]]</a></code> slot.
         </ul>
        </ol>
       </ol>
      </ol>
      <p class="issue" id="issue-99e12d30"><a class="self-link" href="#issue-99e12d30"></a> find exact terms to make sure that we have viewport definitions minus scrollbars</p>
      <p class="issue" id="issue-6397a33f"><a class="self-link" href="#issue-6397a33f"></a> need to also clip to any other layers that were promoted ahead of us!</p>
      <p class="issue" id="issue-22658f2c"><a class="self-link" href="#issue-22658f2c"></a> if a parent and child layer both request to be promoted, the parent’s clipping window will have a complex geometry with holes in it that is not accounted for by this algorithm.  Likely need to specify that graphics layers be processed by order of depth.</p>
      <h4 class="heading settled" data-level="5.2.5" id="enforce-an-input-protection-directive-algo"><span class="secno">5.2.5. </span><span class="content">Enforce An input-protection Directive</span><a class="self-link" href="#enforce-an-input-protection-directive-algo"></a></h4>
       To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="enforce-an-input-protection-directive">enforce an input-protection directive</dfn> for a <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document⑧">Document</a></code> <var>document</var>,
		run the following steps: 
      <ol>
       <li>Parse the policy according to <a data-link-type="biblio" href="#biblio-csp2">[CSP2]</a>.
       <li>If a value is set for <a data-link-type="dfn" href="#protected-element" id="ref-for-protected-element②">protected-element</a>, let <var>protectedElement</var> be the <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element④">Element</a></code> returned by invoking <var>document</var>.<code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#dom-nonelementparentnode-getelementbyid" id="ref-for-dom-nonelementparentnode-getelementbyid①">getElementById()</a></code> with
					the value as the input, or <var>document</var> if <i>null</i> or unset.
       <li>If <var>document</var>’s <code class="idl"><a data-link-type="idl" href="#dom-document-inputprotectionrequested-slot" id="ref-for-dom-document-inputprotectionrequested-slot">[[InputProtectionRequested]]</a></code> flag is <i>false</i>, set it
					to <i>true</i>.
       <li>Construct a new <code class="idl"><a data-link-type="idl" href="#visibilityobserver" id="ref-for-visibilityobserver④">VisibilityObserver</a></code> <var>observer</var>, with <code class="idl"><a data-link-type="idl" href="#dom-visibilityobserver-areathreshold-slot" id="ref-for-dom-visibilityobserver-areathreshold-slot②">[[areaThreshold]]</a></code> set to the value of <a data-link-type="dfn" href="#area-threshold" id="ref-for-area-threshold">area-threshold</a>, <code class="idl"><a data-link-type="idl" href="#dom-visibilityobserver-visiblemargin-slot" id="ref-for-dom-visibilityobserver-visiblemargin-slot①">[[visibleMargin]]</a></code> set to the value of <a data-link-type="dfn" href="#visible-margin" id="ref-for-visible-margin①">visible-margin</a>, <code class="idl"><a data-link-type="idl" href="#dom-visibilityobserver-observedelement-slot" id="ref-for-dom-visibilityobserver-observedelement-slot②">[[observedElement]]</a></code> set to <var>protectedElement</var>, <code class="idl"><a data-link-type="idl" href="#dom-visibilityobserver-displacementaware-slot" id="ref-for-dom-visibilityobserver-displacementaware-slot①">[[displacementAware]]</a></code> set to <i>true</i>,
					and <code class="idl"><a data-link-type="idl" href="#dom-visibilityobserver-callback-slot" id="ref-for-dom-visibilityobserver-callback-slot①">[[callback]]</a></code> set to a new function with an empty function body.
       <li>Set the internal <code class="idl"><a data-link-type="idl" href="#dom-visibilityobserver-timethreshold-slot" id="ref-for-dom-visibilityobserver-timethreshold-slot">[[timeThreshold]]</a></code> slot of <var>observer</var> to the value of <a data-link-type="dfn" href="#time-threshold" id="ref-for-time-threshold">time-threshold</a>
       <li>Set the internal <code class="idl"><a data-link-type="idl" href="#dom-visibilityobserver-associatedcontentsecuritypolicy-slot" id="ref-for-dom-visibilityobserver-associatedcontentsecuritypolicy-slot">[[associatedContentSecurityPolicy]]</a></code> slot of <var>observer</var> to a reference to the
					Content Security Policy which the <a data-link-type="dfn" href="#input-protection-directive" id="ref-for-input-protection-directive①">input-protection directive</a> is associated with.
       <li>When <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#dispatching-events" id="ref-for-dispatching-events">dispatching events</a>, when an <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element⑤">Element</a></code> <var>element</var> will handle an <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#event" id="ref-for-event">Event</a></code> <var>event</var>,
					if <var>event</var> is of type Mouse Event, Pointer Event, Drag-and-Drop, or Clipboard Event, (TODO:linkify)
					and if <var>element</var> has <code class="idl"><a data-link-type="idl" href="#dom-element-inputprotectionobservers-slot" id="ref-for-dom-element-inputprotectionobservers-slot">[[InputProtectionObservers]]</a></code> <var>observers</var>:
       <ol>
        <li>If applicable, check the computed style for the cursor.  If a cursor is typically displayed but
								has been hidden or changed to a non-standard bitmap, <a data-link-type="dfn" href="#handle-a-violation" id="ref-for-handle-a-violation">handle a violation</a> for <var>event</var> and each <var>observer</var> in <var>observers</var>.
        <li>Otherwise, for each <var>observer</var> in <var>observers</var>:
        <ol>
         <li>If <var>observer</var>’s <code class="idl"><a data-link-type="idl" href="#dom-visibilityobserver-previousvisibleratio-slot" id="ref-for-dom-visibilityobserver-previousvisibleratio-slot②">[[previousVisibleRatio]]</a></code> is less than <code class="idl"><a data-link-type="idl" href="#dom-visibilityobserver-areathreshold-slot" id="ref-for-dom-visibilityobserver-areathreshold-slot③">[[areaThreshold]]</a></code>, <a data-link-type="dfn" href="#handle-a-violation" id="ref-for-handle-a-violation①">handle a violation</a> for <var>observer</var>.
         <li>If <var>observer</var>’s <code class="idl"><a data-link-type="idl" href="#dom-visibilityobserver-previousvisibleratio-slot" id="ref-for-dom-visibilityobserver-previousvisibleratio-slot③">[[previousVisibleRatio]]</a></code> is greater than <code class="idl"><a data-link-type="idl" href="#dom-visibilityobserver-areathreshold-slot" id="ref-for-dom-visibilityobserver-areathreshold-slot④">[[areaThreshold]]</a></code>,
										get the most recent <code class="idl"><a data-link-type="idl" href="#visibilityobserverentry" id="ref-for-visibilityobserverentry②">VisibilityObserverEntry</a></code> <var>entry</var> from <var>observer</var>’s <code class="idl"><a data-link-type="idl" href="#dom-visibilityobserver-queuedentries-slot" id="ref-for-dom-visibilityobserver-queuedentries-slot⑥">[[QueuedEntries]]</a></code>.  If the difference between <var>entry</var>.<code class="idl"><a data-link-type="idl" href="#dom-visibilityobserverentry-time" id="ref-for-dom-visibilityobserverentry-time①">time</a></code> and <var>now</var> is less than <code class="idl"><a data-link-type="idl" href="#dom-visibilityobserver-timethreshold-slot" id="ref-for-dom-visibilityobserver-timethreshold-slot①">[[timeThreshold]]</a></code>, <a data-link-type="dfn" href="#handle-a-violation" id="ref-for-handle-a-violation②">handle a violation</a> for <var>observer</var>. 
        </ol>
       </ol>
      </ol>
      <h4 class="heading settled" data-level="5.2.6" id="handle-a-violation-algo"><span class="secno">5.2.6. </span><span class="content">Handle a Violation</span><a class="self-link" href="#handle-a-violation-algo"></a></h4>
       To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="handle-a-violation">handle a violation</dfn> of an <a data-link-type="dfn" href="#input-protection-directive" id="ref-for-input-protection-directive②">input-protection directive</a> for <var>observer</var> and <var>event</var>, run the following steps: 
      <ul>
       <li>Follow the steps in <a data-link-type="biblio" href="#biblio-csp2">[CSP2]</a> to report a violation for <var>observer</var>’s <code class="idl"><a data-link-type="idl" href="#dom-visibilityobserver-associatedcontentsecuritypolicy-slot" id="ref-for-dom-visibilityobserver-associatedcontentsecuritypolicy-slot①">[[associatedContentSecurityPolicy]]</a></code> <var>policy</var>.
       <li>Determine if <var>policy</var> is being <i>enforced</i> or <i>monitored</i>. <a data-link-type="biblio" href="#biblio-csp2">[CSP2]</a>
       <li>If <var>policy</var> is being <i>enforced</i>, set <var>event</var>’s <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#cancelled-flag" id="ref-for-cancelled-flag">cancelled flag</a> and <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#stop-propagation-flag" id="ref-for-stop-propagation-flag">stop propagation flag</a>.
       <li>If <var>policy</var> is being <i>monitored</i>, set <var>event</var>.<code class="idl"><a data-link-type="idl" href="#dom-event-isunsafe" id="ref-for-dom-event-isunsafe">isUnsafe</a></code> to <i>true</i>.
      </ul>
      <h3 class="heading settled" data-level="5.3" id="external-spec-integrations"><span class="secno">5.3. </span><span class="content">External Spec Integrations</span><a class="self-link" href="#external-spec-integrations"></a></h3>
      <h4 class="heading settled" data-level="5.3.1" id="event-loop"><span class="secno">5.3.1. </span><span class="content">HTML Processing Model: Event Loop</span><a class="self-link" href="#event-loop"></a></h4>
       As part of substep 10 of the <a href="https://html.spec.whatwg.org/multipage/webappapis.html#processing-model-8"> update the rendering</a> event loop in the HTML Processing Model, <a data-link-type="dfn" href="#promote-observed-graphicslayers" id="ref-for-promote-observed-graphicslayers①">Promote Observed GraphicsLayers</a>, passing in <i>now</i> as the timestamp. 
      <h4 class="heading settled" data-level="5.3.2" id="dispatching-events-algo"><span class="secno">5.3.2. </span><span class="content">DOM: Dispatching Events</span><a class="self-link" href="#dispatching-events-algo"></a></h4>
       As part of <a href="https://dom.spec.whatwg.org/#dispatching-events">dispatching events</a> in the DOM Standard, add a substep to step 5, ("For each <i>object</i> in <i>event path</i>..."),
		invoking step 7 of <a data-link-type="dfn" href="#enforce-an-input-protection-directive" id="ref-for-enforce-an-input-protection-directive">enforce an input-protection directive</a> before proceeding to
		"invoke <i>object</i> with <i>event</i>". 
      <h4 class="heading settled" data-level="5.3.3" id="usafe-attribute"><span class="secno">5.3.3. </span><span class="content">isUnsafe Attribute</span><a class="self-link" href="#usafe-attribute"></a></h4>
<pre class="idl highlight def"><c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://dom.spec.whatwg.org/#event" id="ref-for-event①"><c- g>Event</c-></a> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean①"><c- b>boolean</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="boolean" href="#dom-event-isunsafe" id="ref-for-dom-event-isunsafe①"><c- g>isUnsafe</c-></a>;
};
</pre>
      <dl>
       <dt><dfn class="dfn-paneled idl-code" data-dfn-for="Event" data-dfn-type="attribute" data-export id="dom-event-isunsafe"><code>isUnsafe</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean②">boolean</a>, readonly</span>
       <dd> Will be set to true if the event fired when the event did not
				meet the document’s <em>input-protection</em> requirements. 
      </dl>
     </section>
     <section>
      <h2 class="heading settled" data-level="6" id="privacy-considerations"><span class="secno">6. </span><span class="content">Privacy Considerations</span><a class="self-link" href="#privacy-considerations"></a></h2>
      <p><em>This section is non-normative.</em></p>
      <p>The timing of visibilityEvents may leak some information across Origin boundaries.  An embedded
	document might have previously been unable to learn that it was obscured, or the timing and
	nature of repositioning of ancestor frame’s viewports.  In some circumstances, this information
	leak might have privacy implications, but the granularity and nature of the information is such
	that it should not be of much value to attackers.  Compared to anti-clickjacking strategies
	which rely on pixel comparisions, the side channels exposed by comparing rectulangar masks are
	very low bandwidth. The privacy gains from preventing clickjacking, considered in a holistic
	system context, may be quite large.</p>
     </section>
     <section>
      <h2 class="heading settled" data-level="7" id="security-considerations"><span class="secno">7. </span><span class="content">Security Considerations</span><a class="self-link" href="#security-considerations"></a></h2>
      <p><em>This section is non-normative.</em></p>
      <p>UI Redressing and Clickjacking attacks rely on violating the contextual and temporal
	integrity of embedded content. Because these attacks target the subjective perception 
	of the user and not well-defined security boundaries, the heuristic protections 
	afforded by the input-protection directive can never be 100% effective for every 
	interface. It provides no protection against certain classes of attacks, such as 
	displaying content around an embedded resource that appears to extend a trusted 
	dialog but provides misleading information.</p>
      <p>When used as a mechanism to report visibility for purposes of monetizing content,
	operators should be aware that a malicious or modified user agent can always report
	perfect visibility for content it colludes with.  Determining, through remote measurement,
	whether an ostensible viewer of monetizable content is using an agent which faithfully
	implements and reports in conformance with this specification is out of scope for this
	document.</p>
     </section>
     <section>
      <h2 class="heading settled" data-level="8" id="accessibility-considerations"><span class="secno">8. </span><span class="content">Accessibility Considerations</span><a class="self-link" href="#accessibility-considerations"></a></h2>
      <p>Users of accessibility tools MUST NOT be prevented from accessing content
	because of input-protection or VisibilityEvents. If a user agent’s interaction
	modality is not subject to UI redressing attacks or definitions of "visibility"
	do not apply, the user agent SHOULD report a VisibilityEvent indicating 100%
	visibility, and SHOULD never fire a violation for any input-protection policy.</p>
     </section>
    </section>
   </section>
  </main>
  <h2 class="no-ref no-num heading settled" id="conformance"><span class="content">Conformance</span><a class="self-link" href="#conformance"></a></h2>
  <h3 class="no-ref no-num heading settled" id="conventions"><span class="content">Document conventions</span><a class="self-link" href="#conventions"></a></h3>
  <p>Conformance requirements are expressed with a combination of
    descriptive assertions and RFC 2119 terminology. The key words “MUST”,
    “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
    “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
    document are to be interpreted as described in RFC 2119.
    However, for readability, these words do not appear in all uppercase
    letters in this specification. </p>
  <p>All of the text of this specification is normative except sections
    explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a></p>
  <p>Examples in this specification are introduced with the words “for example”
    or are set apart from the normative text with <code>class="example"</code>,
    like this: </p>
  <div class="example" id="example-ae2b6bc0">
   <a class="self-link" href="#example-ae2b6bc0"></a> 
   <p>This is an example of an informative example.</p>
  </div>
  <p>Informative notes begin with the word “Note” and are set apart from the
    normative text with <code>class="note"</code>, like this: </p>
  <p class="note" role="note">Note, this is an informative note.</p>
  <h3 class="no-ref no-num heading settled" id="conformant-algorithms"><span class="content">Conformant Algorithms</span><a class="self-link" href="#conformant-algorithms"></a></h3>
  <p>Requirements phrased in the imperative as part of algorithms (such as
    "strip any leading space characters" or "return false and abort these
    steps") are to be interpreted with the meaning of the key word ("must",
    "should", "may", etc) used in introducing the algorithm.</p>
  <p>Conformance requirements phrased as algorithms or specific steps can be
    implemented in any manner, so long as the end result is equivalent. In
    particular, the algorithms defined in this specification are intended to
    be easy to understand and are not intended to be performant. Implementers
    are encouraged to optimize.</p>
<script src="https://www.w3.org/scripts/TR/2016/fixup.js"></script>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
  <ul class="index">
   <li><a href="#dom-visibilityobserver-areathreshold-slot">[[areaThreshold]]</a><span>, in §5.1.4</span>
   <li><a href="#area-threshold">area-threshold</a><span>, in §4.1.1</span>
   <li><a href="#dom-visibilityobserverinit-areathreshold">areaThreshold</a><span>, in §3.4</span>
   <li><a href="#dom-visibilityobserver-associatedcontentsecuritypolicy-slot">[[associatedContentSecurityPolicy]]</a><span>, in §5.1.4</span>
   <li><a href="#dom-visibilityobserver-callback-slot">[[callback]]</a><span>, in §5.1.4</span>
   <li><a href="#dom-visibilityobserverinit-displacementaware">displacementAware</a><span>, in §3.4</span>
   <li><a href="#dom-visibilityobserver-displacementaware-slot">[[displacementAware]]</a><span>, in §5.1.4</span>
   <li><a href="#enforce-an-input-protection-directive">enforce an input-protection directive</a><span>, in §5.2.5</span>
   <li>
    globalVisibleBounds
    <ul>
     <li><a href="#dom-visibilityobserverentry-globalvisiblebounds">attribute for VisibilityObserverEntry</a><span>, in §3.2</span>
     <li><a href="#dom-visibilityobserverentryinit-globalvisiblebounds">dict-member for VisibilityObserverEntryInit</a><span>, in §3.2</span>
    </ul>
   <li><a href="#graphicslayer">GraphicsLayer</a><span>, in §5.2.4</span>
   <li><a href="#handle-a-violation">handle a violation</a><span>, in §5.2.6</span>
   <li><a href="#input-protection-directive">input-protection Directive</a><span>, in §4.1</span>
   <li><a href="#dom-element-inputprotectionobservers-slot">[[InputProtectionObservers]]</a><span>, in §5.1.2</span>
   <li><a href="#dom-document-inputprotectionrequested-slot">[[InputProtectionRequested]]</a><span>, in §5.1.3</span>
   <li><a href="#dom-event-isunsafe">isUnsafe</a><span>, in §5.3.3</span>
   <li><a href="#notify-visibility-observers">notify visibility observers</a><span>, in §5.2.2</span>
   <li><a href="#dom-visibilityobserver-observe">observe()</a><span>, in §3.3</span>
   <li><a href="#dom-visibilityobserverinit-observedelement">observedElement</a><span>, in §3.4</span>
   <li><a href="#dom-visibilityobserver-observedelement-slot">[[observedElement]]</a><span>, in §5.1.4</span>
   <li><a href="#dom-visibilityobserver-previousglobalviewportposition-slot">[[previousGlobalViewportPosition]]</a><span>, in §5.1.4</span>
   <li><a href="#dom-visibilityobserver-previousvisibleratio-slot">[[previousVisibleRatio]]</a><span>, in §5.1.4</span>
   <li><a href="#promote-observed-graphicslayers">promote observed graphicsLayers</a><span>, in §5.2.4</span>
   <li><a href="#protected-element">protected-element</a><span>, in §4.1.1</span>
   <li><a href="#queue-a-visibilityobserverentry">queue a VisibilityObserverEntry</a><span>, in §5.2.3</span>
   <li><a href="#queue-a-visibility-observer-task">queue a visibility observer task</a><span>, in §5.2.1</span>
   <li><a href="#dom-visibilityobserver-queuedentries-slot">[[QueuedEntries]]</a><span>, in §5.1.4</span>
   <li><a href="#dom-document-registeredvisibilityobservers-slot">[[RegisteredVisibilityObservers]]</a><span>, in §5.1.3</span>
   <li><a href="#dom-visibilityobserver-takerecords">takeRecords()</a><span>, in §3.3</span>
   <li>
    time
    <ul>
     <li><a href="#dom-visibilityobserverentry-time">attribute for VisibilityObserverEntry</a><span>, in §3.2</span>
     <li><a href="#dom-visibilityobserverentryinit-time">dict-member for VisibilityObserverEntryInit</a><span>, in §3.2</span>
    </ul>
   <li><a href="#dom-visibilityobserver-timethreshold-slot">[[timeThreshold]]</a><span>, in §5.1.4</span>
   <li><a href="#time-threshold">time-threshold</a><span>, in §4.1.1</span>
   <li><a href="#dom-visibilityobserver-unobserve">unobserve()</a><span>, in §3.3</span>
   <li><a href="#visibilityobserver">VisibilityObserver</a><span>, in §3.3</span>
   <li><a href="#callbackdef-visibilityobservercallback">VisibilityObserverCallback</a><span>, in §3.1</span>
   <li><a href="#dom-visibilityobserver-visibilityobserver">VisibilityObserver(callback)</a><span>, in §3.3</span>
   <li><a href="#dom-visibilityobserver-visibilityobserver-callback-options">VisibilityObserver(callback, options)</a><span>, in §3.3</span>
   <li><a href="#visibilityobserverentry">VisibilityObserverEntry</a><span>, in §3.2</span>
   <li><a href="#dom-visibilityobserverentry-visibilityobserverentry">VisibilityObserverEntry(callback)</a><span>, in §3.2</span>
   <li><a href="#dom-visibilityobserverentry-visibilityobserverentry">VisibilityObserverEntry(callback, visibilityObserverEntryInit)</a><span>, in §3.2</span>
   <li><a href="#dictdef-visibilityobserverentryinit">VisibilityObserverEntryInit</a><span>, in §3.2</span>
   <li><a href="#dictdef-visibilityobserverinit">VisibilityObserverInit</a><span>, in §3.4</span>
   <li><a href="#browsing-context-visibilityobservertaskqueued">VisibilityObserverTaskQueued</a><span>, in §5.1.1</span>
   <li>
    visibleBounds
    <ul>
     <li><a href="#dom-visibilityobserverentry-visiblebounds">attribute for VisibilityObserverEntry</a><span>, in §3.2</span>
     <li><a href="#dom-visibilityobserverentryinit-visiblebounds">dict-member for VisibilityObserverEntryInit</a><span>, in §3.2</span>
    </ul>
   <li><a href="#visible-margin">visible-margin</a><span>, in §4.1.1</span>
   <li><a href="#dom-visibilityobserver-visiblemargin-slot">[[visibleMargin]]</a><span>, in §5.1.4</span>
   <li><a href="#dom-visibilityobserverinit-visiblemargin">visibleMargin</a><span>, in §3.4</span>
  </ul>
  <aside class="dfn-panel" data-for="term-for-propdef-margin">
   <a href="https://www.w3.org/TR/css-box-3/#propdef-margin">https://www.w3.org/TR/css-box-3/#propdef-margin</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-margin">3.4. The VisibilityObserverInit dictionary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-element-getboundingclientrect">
   <a href="https://www.w3.org/TR/cssom-view/#dom-element-getboundingclientrect">https://www.w3.org/TR/cssom-view/#dom-element-getboundingclientrect</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-element-getboundingclientrect">3.4. The VisibilityObserverInit dictionary</a> <a href="#ref-for-dom-element-getboundingclientrect①">(2)</a>
    <li><a href="#ref-for-dom-element-getboundingclientrect②">4.1.1. Directive Value</a>
    <li><a href="#ref-for-dom-element-getboundingclientrect③">5.2.4. Promote Observed GraphicsLayers</a> <a href="#ref-for-dom-element-getboundingclientrect④">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-document">
   <a href="https://dom.spec.whatwg.org/#document">https://dom.spec.whatwg.org/#document</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-document">3.4. The VisibilityObserverInit dictionary</a>
    <li><a href="#ref-for-document①">4.1.1. Directive Value</a>
    <li><a href="#ref-for-document②">5.1.3. Document</a>
    <li><a href="#ref-for-document③">5.1.4. VisibilityObserver</a>
    <li><a href="#ref-for-document④">5.2.2. Notify VisibilityObservers</a>
    <li><a href="#ref-for-document⑤">5.2.4. Promote Observed GraphicsLayers</a> <a href="#ref-for-document⑥">(2)</a> <a href="#ref-for-document⑦">(3)</a>
    <li><a href="#ref-for-document⑧">5.2.5. Enforce An input-protection Directive</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-element">
   <a href="https://dom.spec.whatwg.org/#element">https://dom.spec.whatwg.org/#element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-element">3.4. The VisibilityObserverInit dictionary</a> <a href="#ref-for-element①">(2)</a>
    <li><a href="#ref-for-element②">4.1.1. Directive Value</a>
    <li><a href="#ref-for-element③">5.1.2. Element</a>
    <li><a href="#ref-for-element④">5.2.5. Enforce An input-protection Directive</a> <a href="#ref-for-element⑤">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-event">
   <a href="https://dom.spec.whatwg.org/#event">https://dom.spec.whatwg.org/#event</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-event">5.2.5. Enforce An input-protection Directive</a>
    <li><a href="#ref-for-event①">5.3.3. isUnsafe Attribute</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-nonelementparentnode-getelementbyid">
   <a href="https://dom.spec.whatwg.org/#dom-nonelementparentnode-getelementbyid">https://dom.spec.whatwg.org/#dom-nonelementparentnode-getelementbyid</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-nonelementparentnode-getelementbyid">4.1.1. Directive Value</a>
    <li><a href="#ref-for-dom-nonelementparentnode-getelementbyid①">5.2.5. Enforce An input-protection Directive</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-stop-propagation-flag">
   <a href="https://dom.spec.whatwg.org/#stop-propagation-flag">https://dom.spec.whatwg.org/#stop-propagation-flag</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-stop-propagation-flag">5.2.6. Handle a Violation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-domrect">
   <a href="https://www.w3.org/TR/geometry-1/#domrect">https://www.w3.org/TR/geometry-1/#domrect</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-domrect">3.2. The VisibilityObserverEntry interface</a> <a href="#ref-for-domrect①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dictdef-domrectinit">
   <a href="https://www.w3.org/TR/geometry-1/#dictdef-domrectinit">https://www.w3.org/TR/geometry-1/#dictdef-domrectinit</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-domrectinit">3.2. The VisibilityObserverEntry interface</a> <a href="#ref-for-dictdef-domrectinit①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-domrectreadonly">
   <a href="https://www.w3.org/TR/geometry-1/#domrectreadonly">https://www.w3.org/TR/geometry-1/#domrectreadonly</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-domrectreadonly">3.2. The VisibilityObserverEntry interface</a> <a href="#ref-for-domrectreadonly①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-DOMString">
   <a href="https://heycam.github.io/webidl/#idl-DOMString">https://heycam.github.io/webidl/#idl-DOMString</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-DOMString">3.4. The VisibilityObserverInit dictionary</a>
    <li><a href="#ref-for-idl-DOMString①">4.1.1. Directive Value</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-Exposed">
   <a href="https://heycam.github.io/webidl/#Exposed">https://heycam.github.io/webidl/#Exposed</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-Exposed">3.2. The VisibilityObserverEntry interface</a>
    <li><a href="#ref-for-Exposed①">3.3. The VisibilityObserver Interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-boolean">
   <a href="https://heycam.github.io/webidl/#idl-boolean">https://heycam.github.io/webidl/#idl-boolean</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-boolean">3.4. The VisibilityObserverInit dictionary</a>
    <li><a href="#ref-for-idl-boolean①">5.3.3. isUnsafe Attribute</a> <a href="#ref-for-idl-boolean②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-double">
   <a href="https://heycam.github.io/webidl/#idl-double">https://heycam.github.io/webidl/#idl-double</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-double">3.4. The VisibilityObserverInit dictionary</a> <a href="#ref-for-idl-double①">(2)</a>
   </ul>
  </aside>
  <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
  <ul class="index">
   <li>
    <a data-link-type="biblio">[css-box-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-margin" style="color:initial">margin</span>
    </ul>
   <li>
    <a data-link-type="biblio">[cssom-view-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-dom-element-getboundingclientrect" style="color:initial">getBoundingClientRect()</span>
    </ul>
   <li>
    <a data-link-type="biblio">[DOM]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-document" style="color:initial">Document</span>
     <li><span class="dfn-paneled" id="term-for-element" style="color:initial">Element</span>
     <li><span class="dfn-paneled" id="term-for-event" style="color:initial">Event</span>
     <li><span class="dfn-paneled" id="term-for-dom-nonelementparentnode-getelementbyid" style="color:initial">getElementById(elementId)</span>
     <li><span class="dfn-paneled" id="term-for-stop-propagation-flag" style="color:initial">stop propagation flag</span>
    </ul>
   <li>
    <a data-link-type="biblio">[geometry-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-domrect" style="color:initial">DOMRect</span>
     <li><span class="dfn-paneled" id="term-for-dictdef-domrectinit" style="color:initial">DOMRectInit</span>
     <li><span class="dfn-paneled" id="term-for-domrectreadonly" style="color:initial">DOMRectReadOnly</span>
    </ul>
   <li>
    <a data-link-type="biblio">[WebIDL]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-idl-DOMString" style="color:initial">DOMString</span>
     <li><span class="dfn-paneled" id="term-for-Exposed" style="color:initial">Exposed</span>
     <li><span class="dfn-paneled" id="term-for-idl-boolean" style="color:initial">boolean</span>
     <li><span class="dfn-paneled" id="term-for-idl-double" style="color:initial">double</span>
    </ul>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
  <dl>
   <dt id="biblio-csp2">[CSP2]
   <dd>Mike West; Adam Barth; Daniel Veditz. <a href="https://www.w3.org/TR/CSP2/">Content Security Policy Level 2</a>. 15 December 2016. REC. URL: <a href="https://www.w3.org/TR/CSP2/">https://www.w3.org/TR/CSP2/</a>
   <dt id="biblio-css-box-3">[CSS-BOX-3]
   <dd>Elika Etemad. <a href="https://www.w3.org/TR/css-box-3/">CSS Box Model Module Level 3</a>. 18 December 2018. WD. URL: <a href="https://www.w3.org/TR/css-box-3/">https://www.w3.org/TR/css-box-3/</a>
   <dt id="biblio-cssom-view-1">[CSSOM-VIEW-1]
   <dd>Simon Pieters. <a href="https://www.w3.org/TR/cssom-view-1/">CSSOM View Module</a>. 17 March 2016. WD. URL: <a href="https://www.w3.org/TR/cssom-view-1/">https://www.w3.org/TR/cssom-view-1/</a>
   <dt id="biblio-dom">[DOM]
   <dd>Anne van Kesteren. <a href="https://dom.spec.whatwg.org/">DOM Standard</a>. Living Standard. URL: <a href="https://dom.spec.whatwg.org/">https://dom.spec.whatwg.org/</a>
   <dt id="biblio-geometry-1">[GEOMETRY-1]
   <dd>Simon Pieters; Chris Harrelson. <a href="https://www.w3.org/TR/geometry-1/">Geometry Interfaces Module Level 1</a>. 4 December 2018. CR. URL: <a href="https://www.w3.org/TR/geometry-1/">https://www.w3.org/TR/geometry-1/</a>
   <dt id="biblio-rfc2119">[RFC2119]
   <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a>
   <dt id="biblio-webidl">[WebIDL]
   <dd>Boris Zbarsky. <a href="https://heycam.github.io/webidl/">Web IDL</a>. 15 December 2016. ED. URL: <a href="https://heycam.github.io/webidl/">https://heycam.github.io/webidl/</a>
  </dl>
  <h2 class="no-num no-ref heading settled" id="idl-index"><span class="content">IDL Index</span><a class="self-link" href="#idl-index"></a></h2>
<pre class="idl highlight def"><c- b>callback</c-> <a href="#callbackdef-visibilityobservercallback"><code><c- g>VisibilityObserverCallback</c-></code></a> = <c- b>void</c->(<c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#visibilityobserverentry" id="ref-for-visibilityobserverentry③"><c- n>VisibilityObserverEntry</c-></a>> <a href="#dom-visibilityobservercallback-entries"><code><c- g>entries</c-></code></a>, <a class="n" data-link-type="idl-name" href="#visibilityobserver" id="ref-for-visibilityobserver⑤"><c- n>VisibilityObserver</c-></a> <a href="#dom-visibilityobservercallback-observer"><code><c- g>observer</c-></code></a>);

[<a href="#dom-visibilityobserverentry-visibilityobserverentry"><code><c- g>Constructor</c-></code></a>(<a class="n" data-link-type="idl-name" href="#callbackdef-visibilityobservercallback" id="ref-for-callbackdef-visibilityobservercallback②"><c- n>VisibilityObserverCallback</c-></a> <a href="#dom-visibilityobserverentry-visibilityobserverentry-callback-visibilityobserverentryinit-callback"><code><c- g>callback</c-></code></a>, <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-visibilityobserverentryinit" id="ref-for-dictdef-visibilityobserverentryinit①"><c- n>VisibilityObserverEntryInit</c-></a> <a href="#dom-visibilityobserverentry-visibilityobserverentry-callback-visibilityobserverentryinit-visibilityobserverentryinit"><code><c- g>visibilityObserverEntryInit</c-></code></a>), <a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed②"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <a href="#visibilityobserverentry"><code><c- g>VisibilityObserverEntry</c-></code></a> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://www.w3.org/TR/geometry-1/#domrectreadonly" id="ref-for-domrectreadonly②"><c- n>DOMRectReadOnly</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMRectReadOnly" href="#dom-visibilityobserverentry-globalvisiblebounds" id="ref-for-dom-visibilityobserverentry-globalvisiblebounds③"><c- g>globalVisibleBounds</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://www.w3.org/TR/geometry-1/#domrectreadonly" id="ref-for-domrectreadonly①①"><c- n>DOMRectReadOnly</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMRectReadOnly" href="#dom-visibilityobserverentry-visiblebounds" id="ref-for-dom-visibilityobserverentry-visiblebounds①"><c- g>visibleBounds</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="http://www.w3.org/TR/hr-time/#domhighrestimestamp" id="ref-for-domhighrestimestamp③"><c- n>DOMHighResTimeStamp</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMHighResTimeStamp" href="#dom-visibilityobserverentry-time" id="ref-for-dom-visibilityobserverentry-time②"><c- g>time</c-></a>;
 };

<c- b>dictionary</c-> <a href="#dictdef-visibilityobserverentryinit"><code><c- g>VisibilityObserverEntryInit</c-></code></a> {
  <c- b>required</c-> <a class="n" data-link-type="idl-name" href="https://www.w3.org/TR/geometry-1/#dictdef-domrectinit" id="ref-for-dictdef-domrectinit②"><c- n>DOMRectInit</c-></a> <a data-type="DOMRectInit " href="#dom-visibilityobserverentryinit-globalvisiblebounds"><code><c- g>globalVisibleBounds</c-></code></a>;
  <c- b>required</c-> <a class="n" data-link-type="idl-name" href="https://www.w3.org/TR/geometry-1/#dictdef-domrectinit" id="ref-for-dictdef-domrectinit①①"><c- n>DOMRectInit</c-></a> <a data-type="DOMRectInit " href="#dom-visibilityobserverentryinit-visiblebounds"><code><c- g>visibleBounds</c-></code></a>;
  <c- b>required</c-> <a class="n" data-link-type="idl-name" href="http://www.w3.org/TR/hr-time/#domhighrestimestamp" id="ref-for-domhighrestimestamp①①"><c- n>DOMHighResTimeStamp</c-></a> <a data-type="DOMHighResTimeStamp " href="#dom-visibilityobserverentryinit-time"><code><c- g>time</c-></code></a>;
};

[<a href="#dom-visibilityobserver-visibilityobserver"><code><c- g>Constructor</c-></code></a>(<a class="n" data-link-type="idl-name" href="#callbackdef-visibilityobservercallback" id="ref-for-callbackdef-visibilityobservercallback①①"><c- n>VisibilityObserverCallback</c-></a> <a href="#dom-visibilityobserver-visibilityobserver-callback-callback"><code><c- g>callback</c-></code></a>), <a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed①①"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <a href="#visibilityobserver"><code><c- g>VisibilityObserver</c-></code></a> {
  <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-visibilityobserver-observe" id="ref-for-dom-visibilityobserver-observe①"><c- g>observe</c-></a> ();
  <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-visibilityobserver-unobserve" id="ref-for-dom-visibilityobserver-unobserve①"><c- g>unobserve</c-></a> ();
  <c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#visibilityobserverentry" id="ref-for-visibilityobserverentry①①"><c- n>VisibilityObserverEntry</c-></a>> <a class="idl-code" data-link-type="method" href="#dom-visibilityobserver-takerecords" id="ref-for-dom-visibilityobserver-takerecords①"><c- g>takeRecords</c-></a> ();
};

<c- b>dictionary</c-> <a href="#dictdef-visibilityobserverinit"><code><c- g>VisibilityObserverInit</c-></code></a> {
  (<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double②"><c- b>double</c-></a> <c- b>or</c-> <c- b>sequence</c->&lt;<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①①"><c- b>double</c-></a>>) <a class="idl-code" data-default="0" data-link-type="dict-member" data-type="(double or sequence<double>) " href="#dom-visibilityobserverinit-areathreshold" id="ref-for-dom-visibilityobserverinit-areathreshold①"><c- g>areaThreshold</c-></a> = 0;
 (<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean③"><c- b>boolean</c-></a>) <a class="idl-code" data-default="false" data-link-type="dict-member" data-type="(boolean) " href="#dom-visibilityobserverinit-displacementaware" id="ref-for-dom-visibilityobserverinit-displacementaware①"><c- g>displacementAware</c-></a> = <c- b>false</c->;
 (<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString②"><c- b>DOMString</c-></a>) <a class="idl-code" data-default="&quot;0px&quot;" data-link-type="dict-member" data-type="(DOMString) " href="#dom-visibilityobserverinit-visiblemargin" id="ref-for-dom-visibilityobserverinit-visiblemargin②"><c- g>visibleMargin</c-></a> = "0px";
 (<a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element" id="ref-for-element⑥"><c- n>Element</c-></a>)? <a class="idl-code" data-link-type="dict-member" data-type="(Element)? " href="#dom-visibilityobserverinit-observedelement" id="ref-for-dom-visibilityobserverinit-observedelement①"><c- g>observedElement</c-></a>;
};

<c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://dom.spec.whatwg.org/#event" id="ref-for-event①①"><c- g>Event</c-></a> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean①①"><c- b>boolean</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="boolean" href="#dom-event-isunsafe" id="ref-for-dom-event-isunsafe①①"><c- g>isUnsafe</c-></a>;
};

</pre>
  <h2 class="no-num no-ref heading settled" id="issues-index"><span class="content">Issues Index</span><a class="self-link" href="#issues-index"></a></h2>
  <div style="counter-reset:issue">
   <div class="issue"> Do we need to deal with form submission / navigations that aren’t JS-event-based?<a href="#issue-b24dcbe0"> ↵ </a></div>
   <div class="issue"> how to interact with frame-ancestors and XFO?<a href="#issue-b233e40b"> ↵ </a></div>
   <div class="issue"> Should we define an appropriate <var>timeout</var>?<a href="#issue-338c1e1f"> ↵ </a></div>
   <div class="issue"> find exact terms to make sure that we have viewport definitions minus scrollbars<a href="#issue-99e12d30"> ↵ </a></div>
   <div class="issue"> need to also clip to any other layers that were promoted ahead of us!<a href="#issue-6397a33f"> ↵ </a></div>
   <div class="issue"> if a parent and child layer both request to be promoted, the parent’s clipping window will have a complex geometry with holes in it that is not accounted for by this algorithm.  Likely need to specify that graphics layers be processed by order of depth.<a href="#issue-22658f2c"> ↵ </a></div>
  </div>
  <aside class="dfn-panel" data-for="callbackdef-visibilityobservercallback">
   <b><a href="#callbackdef-visibilityobservercallback">#callbackdef-visibilityobservercallback</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-callbackdef-visibilityobservercallback">3.2. The VisibilityObserverEntry interface</a>
    <li><a href="#ref-for-callbackdef-visibilityobservercallback①">3.3. The VisibilityObserver Interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="visibilityobserverentry">
   <b><a href="#visibilityobserverentry">#visibilityobserverentry</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-visibilityobserverentry">3.1. The VisibilityObserverCallback</a>
    <li><a href="#ref-for-visibilityobserverentry①">3.3. The VisibilityObserver Interface</a>
    <li><a href="#ref-for-visibilityobserverentry②">5.2.5. Enforce An input-protection Directive</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dictdef-visibilityobserverentryinit">
   <b><a href="#dictdef-visibilityobserverentryinit">#dictdef-visibilityobserverentryinit</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-visibilityobserverentryinit">3.2. The VisibilityObserverEntry interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-visibilityobserverentry-globalvisiblebounds">
   <b><a href="#dom-visibilityobserverentry-globalvisiblebounds">#dom-visibilityobserverentry-globalvisiblebounds</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-visibilityobserverentry-globalvisiblebounds">3.2. The VisibilityObserverEntry interface</a> <a href="#ref-for-dom-visibilityobserverentry-globalvisiblebounds①">(2)</a> <a href="#ref-for-dom-visibilityobserverentry-globalvisiblebounds②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-visibilityobserverentry-visiblebounds">
   <b><a href="#dom-visibilityobserverentry-visiblebounds">#dom-visibilityobserverentry-visiblebounds</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-visibilityobserverentry-visiblebounds">3.2. The VisibilityObserverEntry interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-visibilityobserverentry-time">
   <b><a href="#dom-visibilityobserverentry-time">#dom-visibilityobserverentry-time</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-visibilityobserverentry-time">3.2. The VisibilityObserverEntry interface</a>
    <li><a href="#ref-for-dom-visibilityobserverentry-time①">5.2.5. Enforce An input-protection Directive</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-visibilityobserver-visibilityobserver">
   <b><a href="#dom-visibilityobserver-visibilityobserver">#dom-visibilityobserver-visibilityobserver</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-visibilityobserver-visibilityobserver">5.1.4. VisibilityObserver</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="visibilityobserver">
   <b><a href="#visibilityobserver">#visibilityobserver</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-visibilityobserver">3.1. The VisibilityObserverCallback</a>
    <li><a href="#ref-for-visibilityobserver①">3.3. The VisibilityObserver Interface</a>
    <li><a href="#ref-for-visibilityobserver②">5.1.4. VisibilityObserver</a>
    <li><a href="#ref-for-visibilityobserver③">5.2.2. Notify VisibilityObservers</a>
    <li><a href="#ref-for-visibilityobserver④">5.2.5. Enforce An input-protection Directive</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-visibilityobserver-observe">
   <b><a href="#dom-visibilityobserver-observe">#dom-visibilityobserver-observe</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-visibilityobserver-observe">3.3. The VisibilityObserver Interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-visibilityobserver-unobserve">
   <b><a href="#dom-visibilityobserver-unobserve">#dom-visibilityobserver-unobserve</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-visibilityobserver-unobserve">3.3. The VisibilityObserver Interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-visibilityobserver-takerecords">
   <b><a href="#dom-visibilityobserver-takerecords">#dom-visibilityobserver-takerecords</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-visibilityobserver-takerecords">3.3. The VisibilityObserver Interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dictdef-visibilityobserverinit">
   <b><a href="#dictdef-visibilityobserverinit">#dictdef-visibilityobserverinit</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-visibilityobserverinit">5.1.4. VisibilityObserver</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-visibilityobserverinit-areathreshold">
   <b><a href="#dom-visibilityobserverinit-areathreshold">#dom-visibilityobserverinit-areathreshold</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-visibilityobserverinit-areathreshold">3.4. The VisibilityObserverInit dictionary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-visibilityobserverinit-displacementaware">
   <b><a href="#dom-visibilityobserverinit-displacementaware">#dom-visibilityobserverinit-displacementaware</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-visibilityobserverinit-displacementaware">3.4. The VisibilityObserverInit dictionary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-visibilityobserverinit-visiblemargin">
   <b><a href="#dom-visibilityobserverinit-visiblemargin">#dom-visibilityobserverinit-visiblemargin</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-visibilityobserverinit-visiblemargin">3.4. The VisibilityObserverInit dictionary</a>
    <li><a href="#ref-for-dom-visibilityobserverinit-visiblemargin①">4.1.1. Directive Value</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-visibilityobserverinit-observedelement">
   <b><a href="#dom-visibilityobserverinit-observedelement">#dom-visibilityobserverinit-observedelement</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-visibilityobserverinit-observedelement">3.4. The VisibilityObserverInit dictionary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="input-protection-directive">
   <b><a href="#input-protection-directive">#input-protection-directive</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-input-protection-directive">5.1.4. VisibilityObserver</a>
    <li><a href="#ref-for-input-protection-directive①">5.2.5. Enforce An input-protection Directive</a>
    <li><a href="#ref-for-input-protection-directive②">5.2.6. Handle a Violation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="area-threshold">
   <b><a href="#area-threshold">#area-threshold</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-area-threshold">5.2.5. Enforce An input-protection Directive</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="protected-element">
   <b><a href="#protected-element">#protected-element</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-protected-element">3.4. The VisibilityObserverInit dictionary</a>
    <li><a href="#ref-for-protected-element①">4.1.1. Directive Value</a>
    <li><a href="#ref-for-protected-element②">5.2.5. Enforce An input-protection Directive</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="time-threshold">
   <b><a href="#time-threshold">#time-threshold</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-time-threshold">5.2.5. Enforce An input-protection Directive</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="visible-margin">
   <b><a href="#visible-margin">#visible-margin</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-visible-margin">4.1.1. Directive Value</a>
    <li><a href="#ref-for-visible-margin①">5.2.5. Enforce An input-protection Directive</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="browsing-context-visibilityobservertaskqueued">
   <b><a href="#browsing-context-visibilityobservertaskqueued">#browsing-context-visibilityobservertaskqueued</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-browsing-context-visibilityobservertaskqueued">5.2.1. Queue a VisibilityObserver Task</a> <a href="#ref-for-browsing-context-visibilityobservertaskqueued①">(2)</a>
    <li><a href="#ref-for-browsing-context-visibilityobservertaskqueued②">5.2.2. Notify VisibilityObservers</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-element-inputprotectionobservers-slot">
   <b><a href="#dom-element-inputprotectionobservers-slot">#dom-element-inputprotectionobservers-slot</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-element-inputprotectionobservers-slot">5.2.5. Enforce An input-protection Directive</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-document-registeredvisibilityobservers-slot">
   <b><a href="#dom-document-registeredvisibilityobservers-slot">#dom-document-registeredvisibilityobservers-slot</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-document-registeredvisibilityobservers-slot">3.3. The VisibilityObserver Interface</a> <a href="#ref-for-dom-document-registeredvisibilityobservers-slot①">(2)</a>
    <li><a href="#ref-for-dom-document-registeredvisibilityobservers-slot②">5.2.2. Notify VisibilityObservers</a>
    <li><a href="#ref-for-dom-document-registeredvisibilityobservers-slot③">5.2.4. Promote Observed GraphicsLayers</a> <a href="#ref-for-dom-document-registeredvisibilityobservers-slot④">(2)</a> <a href="#ref-for-dom-document-registeredvisibilityobservers-slot⑤">(3)</a> <a href="#ref-for-dom-document-registeredvisibilityobservers-slot⑥">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-document-inputprotectionrequested-slot">
   <b><a href="#dom-document-inputprotectionrequested-slot">#dom-document-inputprotectionrequested-slot</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-document-inputprotectionrequested-slot">5.2.5. Enforce An input-protection Directive</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-visibilityobserver-queuedentries-slot">
   <b><a href="#dom-visibilityobserver-queuedentries-slot">#dom-visibilityobserver-queuedentries-slot</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-visibilityobserver-queuedentries-slot">3.3. The VisibilityObserver Interface</a> <a href="#ref-for-dom-visibilityobserver-queuedentries-slot①">(2)</a>
    <li><a href="#ref-for-dom-visibilityobserver-queuedentries-slot②">5.2.2. Notify VisibilityObservers</a> <a href="#ref-for-dom-visibilityobserver-queuedentries-slot③">(2)</a> <a href="#ref-for-dom-visibilityobserver-queuedentries-slot④">(3)</a>
    <li><a href="#ref-for-dom-visibilityobserver-queuedentries-slot⑤">5.2.3. Queue a VisibilityObserverEntry</a>
    <li><a href="#ref-for-dom-visibilityobserver-queuedentries-slot⑥">5.2.5. Enforce An input-protection Directive</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-visibilityobserver-previousvisibleratio-slot">
   <b><a href="#dom-visibilityobserver-previousvisibleratio-slot">#dom-visibilityobserver-previousvisibleratio-slot</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-visibilityobserver-previousvisibleratio-slot">5.2.4. Promote Observed GraphicsLayers</a> <a href="#ref-for-dom-visibilityobserver-previousvisibleratio-slot①">(2)</a>
    <li><a href="#ref-for-dom-visibilityobserver-previousvisibleratio-slot②">5.2.5. Enforce An input-protection Directive</a> <a href="#ref-for-dom-visibilityobserver-previousvisibleratio-slot③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-visibilityobserver-previousglobalviewportposition-slot">
   <b><a href="#dom-visibilityobserver-previousglobalviewportposition-slot">#dom-visibilityobserver-previousglobalviewportposition-slot</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-visibilityobserver-previousglobalviewportposition-slot">5.2.4. Promote Observed GraphicsLayers</a> <a href="#ref-for-dom-visibilityobserver-previousglobalviewportposition-slot①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-visibilityobserver-callback-slot">
   <b><a href="#dom-visibilityobserver-callback-slot">#dom-visibilityobserver-callback-slot</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-visibilityobserver-callback-slot">3.3. The VisibilityObserver Interface</a>
    <li><a href="#ref-for-dom-visibilityobserver-callback-slot①">5.2.5. Enforce An input-protection Directive</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-visibilityobserver-areathreshold-slot">
   <b><a href="#dom-visibilityobserver-areathreshold-slot">#dom-visibilityobserver-areathreshold-slot</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-visibilityobserver-areathreshold-slot">5.2.4. Promote Observed GraphicsLayers</a> <a href="#ref-for-dom-visibilityobserver-areathreshold-slot①">(2)</a>
    <li><a href="#ref-for-dom-visibilityobserver-areathreshold-slot②">5.2.5. Enforce An input-protection Directive</a> <a href="#ref-for-dom-visibilityobserver-areathreshold-slot③">(2)</a> <a href="#ref-for-dom-visibilityobserver-areathreshold-slot④">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-visibilityobserver-displacementaware-slot">
   <b><a href="#dom-visibilityobserver-displacementaware-slot">#dom-visibilityobserver-displacementaware-slot</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-visibilityobserver-displacementaware-slot">5.2.4. Promote Observed GraphicsLayers</a>
    <li><a href="#ref-for-dom-visibilityobserver-displacementaware-slot①">5.2.5. Enforce An input-protection Directive</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-visibilityobserver-visiblemargin-slot">
   <b><a href="#dom-visibilityobserver-visiblemargin-slot">#dom-visibilityobserver-visiblemargin-slot</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-visibilityobserver-visiblemargin-slot">5.2.4. Promote Observed GraphicsLayers</a>
    <li><a href="#ref-for-dom-visibilityobserver-visiblemargin-slot①">5.2.5. Enforce An input-protection Directive</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-visibilityobserver-observedelement-slot">
   <b><a href="#dom-visibilityobserver-observedelement-slot">#dom-visibilityobserver-observedelement-slot</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-visibilityobserver-observedelement-slot">3.4. The VisibilityObserverInit dictionary</a>
    <li><a href="#ref-for-dom-visibilityobserver-observedelement-slot①">5.2.4. Promote Observed GraphicsLayers</a>
    <li><a href="#ref-for-dom-visibilityobserver-observedelement-slot②">5.2.5. Enforce An input-protection Directive</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-visibilityobserver-timethreshold-slot">
   <b><a href="#dom-visibilityobserver-timethreshold-slot">#dom-visibilityobserver-timethreshold-slot</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-visibilityobserver-timethreshold-slot">5.2.5. Enforce An input-protection Directive</a> <a href="#ref-for-dom-visibilityobserver-timethreshold-slot①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-visibilityobserver-associatedcontentsecuritypolicy-slot">
   <b><a href="#dom-visibilityobserver-associatedcontentsecuritypolicy-slot">#dom-visibilityobserver-associatedcontentsecuritypolicy-slot</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-visibilityobserver-associatedcontentsecuritypolicy-slot">5.2.5. Enforce An input-protection Directive</a>
    <li><a href="#ref-for-dom-visibilityobserver-associatedcontentsecuritypolicy-slot①">5.2.6. Handle a Violation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="queue-a-visibility-observer-task">
   <b><a href="#queue-a-visibility-observer-task">#queue-a-visibility-observer-task</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-queue-a-visibility-observer-task">5.2.3. Queue a VisibilityObserverEntry</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="notify-visibility-observers">
   <b><a href="#notify-visibility-observers">#notify-visibility-observers</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-notify-visibility-observers">5.2.1. Queue a VisibilityObserver Task</a> <a href="#ref-for-notify-visibility-observers①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="queue-a-visibilityobserverentry">
   <b><a href="#queue-a-visibilityobserverentry">#queue-a-visibilityobserverentry</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-queue-a-visibilityobserverentry">5.2.4. Promote Observed GraphicsLayers</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="graphicslayer">
   <b><a href="#graphicslayer">#graphicslayer</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-graphicslayer">5.2.4. Promote Observed GraphicsLayers</a> <a href="#ref-for-graphicslayer①">(2)</a> <a href="#ref-for-graphicslayer②">(3)</a> <a href="#ref-for-graphicslayer③">(4)</a> <a href="#ref-for-graphicslayer④">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="promote-observed-graphicslayers">
   <b><a href="#promote-observed-graphicslayers">#promote-observed-graphicslayers</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-promote-observed-graphicslayers">5.2.4. Promote Observed GraphicsLayers</a>
    <li><a href="#ref-for-promote-observed-graphicslayers①">5.3.1. HTML Processing Model: Event Loop</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="enforce-an-input-protection-directive">
   <b><a href="#enforce-an-input-protection-directive">#enforce-an-input-protection-directive</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-enforce-an-input-protection-directive">5.3.2. DOM: Dispatching Events</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="handle-a-violation">
   <b><a href="#handle-a-violation">#handle-a-violation</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-handle-a-violation">5.2.5. Enforce An input-protection Directive</a> <a href="#ref-for-handle-a-violation①">(2)</a> <a href="#ref-for-handle-a-violation②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-event-isunsafe">
   <b><a href="#dom-event-isunsafe">#dom-event-isunsafe</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-event-isunsafe">5.2.6. Handle a Violation</a>
    <li><a href="#ref-for-dom-event-isunsafe①">5.3.3. isUnsafe Attribute</a>
   </ul>
  </aside>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>